当我运行测试时,它会出现“代码中出现意外的 token 错误:
const wrapper = shallow(<WelcomeMessage/>");
错误是在“(<”处引发的。我已经查看了 stackoverflow 和 github 上的一些答案,但不知何故我仍然无法让它工作。
我已经编写了 Jest 测试。这是我第一次使用 enzyme 和 react 编写测试用例。所以我对设置不太熟悉。我安装了:babel jest、react-dom、babel-plugin-transform-export-extensions、enzyme-adapter-react-16、react-test-renderer、@babel/preset-env 和 @babel/core
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:
module.exports = {
preset: 'jest-puppeteer',
"bail": 0,
setupFiles: ['<rootDir>/enzyme.config.js'],
moduleFileExtensions: ['js', 'json', 'jsx'],
transformIgnorePatterns: ['<rootDir>/node_modules/']
}
enzyme.config.js:
const Enzyme = require('enzyme');
const Adapter = require('enzyme-adapter-react-16');
Enzyme.configure({ adapter: new Adapter() });
.babelrc:
{
"presets": ["@babel/preset-env"],
"plugins": ["transform-export-extensions"],
"only": [
"./**/*.js",
"node_modules/jest-runtime"
]
}
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);
});
});
最佳答案
这一行:
<WelcomeMessage />
是 JSX,其中 "just provides syntactic sugar for the React.createElement
function" .
由于 JSX 实际上并不是有效的 JavaScript 代码,因此必须将其编译为 React.createElement
调用。
这是由 Babel
插件 @babel/plugin-transform-react-jsx
完成的,它包含在 @babel/preset-react
中。 .
将 @babel/preset-react
添加到您的 Babel
配置中,这应该可以解决问题。
关于javascript - Jest Enzyme 测试引发意外 token 错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56045665/