Автор оригинала: Dave Schinkel.
Еще один веселый. Вы можете получить что-то вроде этой ошибки, когда Вы даже не тестируете CSS (Что это бессмысленно и .. Не делай этого!), Но мокча может иногда в зависимости от того, что вы используете для CSS, если вы используете WebPack и т. Д. Это может жаловаться из-за конфликтов с WebPack Загрузка Postcsss или другие CSS сгенерированный код, и так четвертый:
SyntaxError: Header.css: Unexpected token (1:0)
> 1 | :global(.smartbanner) {
| ^
2 | max-width: 100vw;
3 | width: 100%;
4 | position: relative;
В вышеупомянутой ошибке это сучка о некоторых синтаксисе CSS. Wha!? Тесты, которые я бегу, не имеет ничего общего с стилями тестирования! Я не тестирую CSS, вы думаете, WTF! Тьфу, я собирался так здорово и сейчас это?
Ну, это потому, что код, который я проверяю код RACT, и это стили загрузки, и Mocha не уверен, что делать с некоторым стилем поколения, я думаю. Многие из них относятся к PostCSS и другие причудливые стиль поколения в эти дни в мире JS … оно сложно.
(Мини-РАНТ) Имейте в виду, что это не просто моча вещь Так не иди и не думай «О дерьмо, я должен просто использовать шутку, мокко отстой, и все, в том числе Fb Отказ Успокоиться , Сойти с шума-снежинки Bandwagon и охладите себя .. ownough Koolaid. Неправильно, это все сумма BS, и вы это знаете. Mocha Работает удивительно, и jest не дает вам ничего, что Mocha не и хуже, дает вам дерьмо, вам действительно не нужно использовать такие как снимки, которые я ненавижу. Это просто один из случаев, где определенные либусы не знают о вещах и просто нуждаются в одном обороте. Это происходит иногда, когда вы работаете со многими libs, как мы все делаем с узлом … ничего нового. Пока это не слишком больно, чтобы обойти эти вещи, которые случаются в Либе, это все хорошо. Если это Действительно больно, и вы просто не можете справиться с этим, то я отвлечет.
К счастью, как с большинством конфликтов в узловых модулях, многие уже сталкивались с этим и придумали быстрые исправления для него.
Я ушел с Corey House ‘s хороший маленький скрипт Чтобы исправить это, и он работает отлично. Я взял его и изменил это:
mocha-webpack-compiler.js (Вы можете назвать это все, что вы хотите)
/*
Tests are placed alongside files under test.
This file does the following:
1. Sets the environment to 'production' so that
dev-specific babel config in .babelrc doesn't run.
2. Disables Webpack-specific features that Mocha doesn't understand.
3. Registers babel for transpiling our code for testing.
This assures the .babelrc dev config (which includes
hot module reloading code) doesn't apply for tests.
*/
process.env.NODE_ENV = 'production';
/*
Disable webpack-specific features for tests since
Mocha doesn't know what to do with them.
*/
require.extensions['.css'] = function () {
return null;
};
require.extensions['.png'] = function () {
return null;
};
require.extensions['.jpg'] = function () {
return null;
};
/* Register babel so that it will transpile ES6 to ES5 before our tests run. */
require('babel-register')();
Тогда просто покройте этот файл, где вы чувствуете, что в вашем приложении хорошее место, а затем ссылается на его сценарии Mocha, пополняясь на относительный путь к нему. Например, я добавил ./src/test/mocha-webpack-compiler.js к моему существующему сценарию Mocha.
Что также приятно в том, что в этом файле в конце он включает требуют («бабел-реестр») ();
Так что это означает, что вам не нужно добавлять --compilers js: babel-core/Регистрация Для каждого тестового скрипта в вашем приложении он просто заберет его из скрипта выше. Просто делает ваши тестовые сценарии немного очистителя:
Теперь Вебсторт Тестовый бегун больше не нуждается в этом флаге сейчас:
И не делай свой Сценарии Если вы запускаете их таким образом.
Пример в Package.json : «Тест-изолированный блок»: Mocha --require ./src/test/jsdom --compilers js: babel-core/register --recursive ./src/test/unit/***/* .spec.js "
Теперь можно просто быть «Тест-изолированный блок»: Mocha ./src/test/mocha-webpack-compiler.js --require ./src/test/jsdom ./src/test/unit/**/*.spec.js