测试时出现Jest错误：-
Jest encountered an unexpected token
This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.
By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".
Here's what you can do:
• To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
• If you need a custom transformation specify a "transform" option in your config.
• If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.
这是导致问题的文件：-
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import Layout from '../index';
it('renders without crashing', () => {
const div = document.createElement('div');
ReactDOM.render(<Layout />, div);
ReactDOM.unmountComponentAtNode(div);
});
我试着在网上做一些研究，但我认为我的配置文件有问题。
所以我有了包.json:-
{
"name": "tasks.edit",
"version": "0.1.0",
"private": true,
"homepage": "./",
"author": "Development Team",
"scripts": {
"build": "npm run build-css && react-scripts-ts build && npm run postbuild",
"build-css": "node-sass src/styles/sass/ -o src/styles/css/",
"eject": "react-scripts-ts eject",
"postbuild": "rimraf build/**/*.map",
"start": "npm-run-all -p watch-css start-js test:watch",
"start-js": "react-scripts-ts start",
"test": "jest",
"test:coverage": "jest --coverage",
"test:default": "react-scripts-ts test --env=jsdom",
"test:watch": "jest --watchAll -u",
"watch-css": "npm run build-css && node-sass src/styles/sass/ -o src/styles/css/ --watch --recursive",
"debug": "node --debug-brk --inspect ./node_modules/.bin/jest -i"
},
"dependencies": {
"@babel/core": "^7.11.5",
"babel-core": "^6.26.3",
"ckeditor4-react": "0.1.0",
"email-validator": "2.0.4",
"jest": "^26.4.2",
"node-sass": "4.11.0",
"react-joyride": "2.0.3",
"react-redux": "6.0.0",
"redux": "4.0.1"
},
"devDependencies": {
"@babel/preset-react": "^7.10.4",
"@types/react-joyride": "2.0.1",
"@types/react-redux": "7.0.0",
"@types/redux-logger": "3.0.6",
"@types/redux-mock-store": "1.0.0",
"babel-jest": "^26.3.0",
"redux-logger": "3.0.6",
"redux-mock-store": "1.5.3",
"redux-thunk": "2.3.0",
"regenerator-runtime": "^0.13.7"
},
"jest": {
"testMatch": [
"**/__tests__/**/*.[jt]s?(x)",
"**/?(*.)+(spec|test).[jt]s?(x)"
],
"moduleFileExtensions": [
"js",
"jsx",
"json"
]
}
}
这是jest.congig.js
module.exports = {
"name": "Tasks.Edit",
// Setup Jest
"roots": [
"<rootDir>/src"
],
"testEnvironment": "node",
"transformIgnorePatterns": ["/node_modules/"],
// transformIgnorePatterns: [`/node_modules/(?!${esModules})`],
"transform": {
"^.+\.tsx?$": "ts-jest",
"^.+\.(js|jsx|mjs)?$": "babel-jest"
},
"testRegex": "(/__tests__/.*|(\.|/)(test|spec))\.tsx?$",
"moduleNameMapper": {
'office-ui-fabric-react/lib/(.*)$': 'office-ui-fabric-react/lib-commonjs/$1'
},
"moduleFileExtensions": [
"ts",
"tsx",
"js",
"jsx",
"json",
"node"
],
"globals": {
"window": {}
},
// Setup Enzyme
"snapshotSerializers": ["enzyme-to-json/serializer"],
"setupTestFrameworkScriptFile": "<rootDir>/src/setupEnzyme.ts",
}
这是我的.babelrc
{
"presets": [
[
"@babel/preset-react"
]
]
}
这种配置正确吗？我是不是错过了什么？
谢谢你的帮助和时间！
最有可能是在更新包依赖关系时，"babel核"；依赖关系可能已经更新到6.xx.x，它应该是"0"；7.0.0桥.0"；让玩笑发挥作用。
参考：https://github.com/vuejs/vue-cli/issues/1879#issuecomment-412300256https://github.com/vuejs/vue-cli/issues/1879#issuecomment-435194932
我已经通过编辑.babelrc文件来消除Jest错误：-
{
"presets": [
"@babel/react" ,
"@babel/env"
],
"plugins": [
"@babel/plugin-proposal-class-properties"
]
}