[英]Jest Enzyme test throws unexpected token error
When I run the test, it thorws "unexpected token error at the code: 当我运行测试时,它会在代码中引发“意外的令牌错误:
const wrapper = shallow(<WelcomeMessage/>");
The error is thrown at "(<". I have looked at a number of answers from stackoverflow and github but somehow I still cannot get it to work. 错误被抛出到“(<”。我已经查看了来自stackoverflow和github的许多答案,但是不知何故我仍然无法使它工作。
I have written jest tests. 我写了笑话测试。 This is my first time writing a test case using enzyme and react.
这是我第一次使用酶和反应编写测试用例。 So I am not familar with the setup.
因此,我不熟悉该设置。 I have installed: babel jest, react-dom, babel-plugin-transform-export-extensions, enzyme-adapter-react-16, react-test-renderer, @babel/preset-env, and @babel/core
我已经安装了:babel开玩笑,react-dom,babel-plugin-transform-export-extensions,enzyme-adapter-react-16,react-test-renderer,@ babel / preset-env和@ babel / core
package.json:
的package.json:
{
"private": true,
"version": "0.0.0",
"name": "example-jquery",
"devDependencies": {
"@babel/core": "*",
"@babel/preset-env": "^7.4.4",
"babel-jest": "^24.8.0",
"babel-plugin-transform-export-extensions": "^6.22.0",
"enzyme": "^3.9.0",
"enzyme-adapter-react-16": "^1.12.1",
"jest": "^24.8.0",
"jest-dom": "^3.1.4",
"jest-useragent-mock": "0.0.3"
},
"dependencies": {
"jest-puppeteer": "^4.1.1",
"jquery": "^3.4.1",
"jsdom": "^15.0.0",
"puppeteer": "^1.15.0",
"react": "^16.8.6",
"react-dom": "^16.8.6",
"react-test-renderer": "^16.8.6"
},
"scripts": {
"test": "jest --verbose"
},
"jest": {
"transform": {
"^.+\\.jsx?$": "babel-jest"
}
}
}
jest.config.js:
jest.config.js:
module.exports = {
preset: 'jest-puppeteer',
"bail": 0,
setupFiles: ['<rootDir>/enzyme.config.js'],
moduleFileExtensions: ['js', 'json', 'jsx'],
transformIgnorePatterns: ['<rootDir>/node_modules/']
}
enzyme.config.js:
enzyme.config.js:
const Enzyme = require('enzyme');
const Adapter = require('enzyme-adapter-react-16');
Enzyme.configure({ adapter: new Adapter() });
.babelrc:
.babelrc:
{
"presets": ["@babel/preset-env"],
"plugins": ["transform-export-extensions"],
"only": [
"./**/*.js",
"node_modules/jest-runtime"
]
}
WelcomeMessage.test.js:
WelcomeMessage.test.js:
import React from 'react';
import { shallow } from 'enzyme';
// Components
import WelcomeMessage from './WelcomeMessage';
function setup() {
const props = {
imgPath: 'some/image/path/to/a/mock/image',
};
const wrapper = shallow(<WelcomeMessage />);
return { wrapper, props };
}
describe('WelcomeMessage Test Suite', () => {
it('Should have an image', () => {
const { wrapper } = setup();
expect(wrapper.find('img').exists()).toBe(true);
});
});
This line: 这行:
<WelcomeMessage />
is JSX which "just provides syntactic sugar for the React.createElement
function" . 是JSX, “仅为
React.createElement
函数提供语法糖” 。
Since JSX isn't actually valid JavaScript code it must be compiled into React.createElement
calls. 由于JSX实际上不是有效的JavaScript代码,因此必须将其编译为
React.createElement
调用。
This is done by the Babel
plugin @babel/plugin-transform-react-jsx
which is included as part of @babel/preset-react
. 这是通过
Babel
插件@babel/plugin-transform-react-jsx
完成的,该插件包含在@babel/preset-react
。
Add @babel/preset-react
to your Babel
config and that should resolve the issue. 将
@babel/preset-react
添加到您的Babel
配置中,即可解决该问题。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.