Jest неожиданный токен при импорте css
Я получил ошибку SyntaxError: Unexpected token .
в моем коде
import 'react-dates/lib/css/_datepicker.css'
import 'semantic-ui-css/semantic.min.css'
это не в моем spec.js, а в моем коде реализации, есть подсказки, почему? У меня нет проблем с запуском моего приложения, но шутка выдает ошибку, когда я пытаюсь запустить тест.
нет, я получил неразрешенный модуль, если я удалю .css
Вы используете вавилонскую шутку? Похоже, что среди ваших зависимостей отсутствует babel-jest. Вот почему jest не запускает babel в вашем коде ES6+ перед выполнением тестов.
@MebinJoe Я сделал.
Не могли бы вы поделиться .babelrc
Если я не включу вышеуказанный css, я смогу запустить свой тест без проблем, и мой код написан с помощью es6+.
@MebinJoe { "presets": ["next/babel"], "plugins": [["babel-plugin-root-import"], ["babel-plugin-styled-components", { "ssr": true } ], ["встроенный-реагировать-SVG"] ] }
Пожалуйста, попробуйте добавить тестовую конфигурацию: Пример: { "plugins": ["syntax-dynamic-import", "transform-runtime"], "presets": [ [ "es2015", { "modules": false } ], "react ", "stage-0" ], "env": { "start": { "presets": [ "react-hmre" ] }, "test": { "presets": ["es2015", "react", "стадия-0"] } } }
@MebinJoe что нового? Я использую некстджс.
вы имеете в виду последнюю версию конфигурации next.js или babelrc?
См. здесь: stackoverflow.com/a/39434579/1136887
@JamesHibbard, это ответ, большое спасибо, просто moduleNameMapper: { '.+\\.(css|scss|png|jpg|ttf|woff|woff2)$': 'jest-transform-stub' }
ребята, вы можете составить ответ? поэтому вопрос может помочь другим людям (никто не будет читать всю цепочку комментариев :()
@skyboyer: конечно
Отвечает ли это на ваш вопрос? SyntaxError с Jest и React и импорт файлов CSS
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
Проблема в том, что Jest использует эти импорты CSS и пытается разобрать их, как если бы они были JavaScript.
«Неожиданный токен». сообщение, вероятно, появляется, потому что первая строка файла, который он задыхается, является объявлением класса CSS, то есть .datepicker: { ... }.
В любом случае, как указано в этот ответ, способ обойти это — создать файл, содержащий модуль, который экспортирует пустой объект. Я назвал свой styleMock.js.
module.exports = {};
Затем вам нужно создать файл jest.config.js в корне вашего проекта и добавить:
module.exports = {
moduleNameMapper: {
'\\.(css|less)$': '<rootDir>/test/jest/__mocks__/styleMock.js',
}
};
Параметр moduleNameMapper сообщает Jest, как интерпретировать файлы с разными расширениями. В этом случае нам просто нужно указать на пустой файл, который мы только что создали. Очевидно, измените путь к вашему файлу соответствующим образом.
И обратите внимание, что вы можете расширить регулярное выражение выше для любых окончаний файлов, которые вам нужны. Мой выглядит так:
moduleNameMapper: {
'\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
'<rootDir>/test/jest/__mocks__/fileMock.js',
'\\.(css|less)$': '<rootDir>/test/jest/__mocks__/styleMock.js',
},
где fileMock.js идентичен styleMock.js
В качестве альтернативы вы можете использовать такой модуль, как шутка-преобразование-заглушка, который сделает то же самое за вас.
Удивительный ответ! Как только я исправил пути к файлам, чтобы они соответствовали моему проекту, и изменил (css|less) на (css|less|scss), у меня это сработало. Спасибо.
Я пытаюсь это сделать, но получаю ошибку конфигурации: Не удалось найти модуль react-datepicker/dist/react-datepicker.css, отображаемый как: /home/alejo/tecnimaq/tecnilab/frontend/test/jest/__mocks__/styleMock. js. Пожалуйста, проверьте вашу конфигурацию на наличие следующих записей: { "moduleNameMapper": { "/\.(css|less)$/": "/home/alejo/tecnimaq/tecnilab/frontend/test/jest/__mocks__/styleMock.js " }, "преобразователь": не определено }
Я вернулся и снова ценю этот ответ. Что касается RedwoodJs, я вижу, что в этом смысл @redwoodjs\testing\dist\fileMock.js. К сожалению, в нем отсутствует scss. Мое исправление: const moduleNameMapper = { ...config.moduleNameMapper, '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga|css|scss|less)$': '@redwoodjs/testing/dist/fileMock.js' }; delete moduleNameMapper['\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga|css)$']; const configWithEditedModuleNameMapper = { ...config, moduleNameMapper: moduleNameMapper };
(Это исправление должно войти в web\jest.config.js, который затем должен заканчиваться на module.exports = configWithEditedModuleNameMapper;.)
20 минут крутил свои колеса, прежде чем понял, что мои скрипты в package.json указывают на внешний jest.config.js аля "test": "jest --config=./jest.config.js --silent",. Переместил конфигурацию moduleNameMapper в этот файл, и все заработало.
Jest не работает с JSX, который импортирует CSS.
Я решил это, используя ключ moduleNameMapper в конфигурациях jest в файле package.json.
{
"jest":{
"moduleNameMapper":{
"\\.(css|less|scss|sass)$": "identity-obj-proxy"
}
}
}
Но вам нужно будет установить пакет identity-obj-proxy как зависимость dev, т.е.
yarn add identity-obj-proxy -D
Для тех, кто задаст этот вопрос осенью 2020 года или позже, для ошибки типа SyntaxError: Invalid or unexpected token, когда Jest анализирует файлы CSS: правда, ошибка связана с тем, что Jest пытается проанализировать CSS как JavaScript, что не сработает. Таким образом, обновленный способ справиться с этим состоит из 3 шагов в соответствии с Документация Jest по работе со статическими активами, но вам не нужно добавлять дополнительный пакет, такой как identity-obj-proxy, как предложил @chitra, если вы не используете CSS-модули. И в отличие от предложений @james-hibbard: fileMock.js теперь выглядит немного иначе, и вам не нужно создавать jest.config.js.
1 в вашем package.json добавьте это
{
"jest": {
"moduleNameMapper": {
"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
"\\.(css|less)$": "<rootDir>/__mocks__/styleMock.js"
}
}
}
2 Затем создайте следующие два файла:
// __mocks__/styleMock.js
module.exports = {};
3
// __mocks__/fileMock.js
module.exports = 'test-file-stub';
Это должно исправить эти конкретные ошибки, когда Jest работает как
SyntaxError: Invalid or unexpected token
> 1 | import '../src/css/console.scss';
Привет, Кэт Перри, я получаю сообщение об ошибке: «Не удалось найти модуль @reach/tabs/styles.css, отображаемый как: ./src/tests/mocks/styleMock.js». У вас есть идеи, что здесь происходит?
хм, не уверен в этом, извините
Это было решение для меня после нескольких часов отладки и сравнения с примером репозитория with-jest. Это решение работало с react-16.14 и react-dom-16.14, в то время как пример репозитория на react-16.12 и react-dom-16.12 работал со старым решением, оба на next-10.0.
Работал для реакции @ 17.0.2. Спасибо!
Попробуйте без расширения. например: импортировать 'даты реакции/lib/css/_datepicker. Также см. stackoverflow.com/questions/49263429/…, который может решить вашу проблему.