在运行yarn run jest --no-cache时,会抛出一个错误:
SyntaxError: Unexpected token import
我最好的猜测是,babel没有达到这个测试文件。他们需要在.babelrc中包含他们特别的东西吗?
路径:
/src/tests/LandingPage.test.js
测试文件:
import React from 'react';
import ReactShallowRenderer from 'react-test-renderer/shallow';
import LandingPage from '../../components/LandingPage';
test('Should render LandingPage correctly', () => {
const renderer = new ReactShallowRenderer();
renderer.render(<LandingPage />);
expect(renderer.getRenderOutput()).toMatchSnapshot();
});
.babelrc:
{
"presets": [
"env",
"react"
],
"plugins": [
"transform-class-properties",
"transform-object-rest-spread"
]
}
感谢@hannad rehmann在正确的方向上轻推这里是对我有用的解决方案。
yarn add babel-jest --dev
Jest会自动将您的Env设置为测试,因此将您想要的任何配置复制到测试环境中。
{
"presets": [
"env",
"react"
],
"plugins": [
"transform-class-properties",
"transform-object-rest-spread"
],
"env": {
"test": {
"presets": [
"env",
"react"
],
"plugins": [
"transform-class-properties",
"transform-object-rest-spread"
]
}
}
}
jest.config.json
添加到项目根目录{
"transform": {
"^.+\\.jsx?$": "babel-jest"
}
}
我刚刚将它添加到package.json中的测试脚本中,但您也可以在命令行中运行它。
"scripts": {
"test": "jest --config=jest.config.json --watch"
},
哦。这个问题让我浪费了这么多天。这是你需要做的。在那之前检查这些文件。
1).babelrc
安装相应的模块并将它们添加到package.json定义不同的env支持,因为你的jest总是将NODE_ENV
更改为"test"
{
"presets": [
[
"env",
{ "modules": false }],
"react"
],
"plugins": [
"react-hot-loader/babel",
"transform-object-rest-spread",
"transform-class-properties",
"dynamic-import-webpack"
],
"env":{
"test":{
"presets": [
"env",
"react"
],
"plugins": [
"transform-object-rest-spread",
"transform-class-properties",
"dynamic-import-webpack"
]}
}
}
2)将此添加到您的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|scss)$": "<rootDir>/__mocks__/styleMock.js"
},
"automock": false,
"transform": {
"^.+\\.jsx?$": "<rootDir>/node_modules/babel-jest",
"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js"
},
"moduleFileExtensions": [
"js",
"jsx"
],
"moduleDirectories": [
"node_modules"
],
"unmockedModulePathPatterns": [
"<rootDir>/node_modules/react/",
"<rootDir>/node_modules/react-dom/"
],
"transformIgnorePatterns": [
"/node_modules/"
],
"coveragePathIgnorePatterns": [
"/node_modules/"
],
"modulePathIgnorePatterns": [
"/node_modules/"
],
"collectCoverage": true,
"coverageReporters": [
"json",
"lcov",
"text"
]
}
我对这个问题的理解是,Jest会将你的NODE_ENV
更改为"test"
,而Babel没有任何配置这个环境,我们通常会定义Babel配置用于开发和生产环境。当没有babel转换时,import
关键字实际上变成undefined
,因为它实际上在JS上下文中不存在。