[英]Jest encountered an unexpected token in a ReactJS application
I am getting a Jest error when testing :-测试时出现 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.
This is the file that is causing the problem:-这是导致问题的文件:-
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);
});
I tried to do some research online however I think I have something wrong with my config files.我试图在网上做一些研究,但是我认为我的配置文件有问题。
So I have the package.json:-所以我有 package.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"
]
}
} }
This is the jest.congig.js这是 jest.conig.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",
} }
and this is my .babelrc这是我的 .babelrc
{
"presets": [
[
"@babel/preset-react"
]
]
} }
Is this configuration correct?这个配置正确吗? Am I missing something?
我错过了什么吗?
Thanks for your help and time!感谢您的帮助和时间!
Most probably when updating package dependency, "babel-core" dependency may have been updated to 6.xx.x, it should be "7.0.0-bridge.0" for jest to work.很可能在更新软件包依赖项时,“babel-core”依赖项可能已更新为 6.xx.x,它应该是“7.0.0-bridge.0”以使 jest 工作。
Reference: https://github.com/vuejs/vue-cli/issues/1879#issuecomment-412300256 https://github.com/vuejs/vue-cli/issues/1879#issuecomment-435194932参考: https : //github.com/vuejs/vue-cli/issues/1879#issuecomment-412300256 https://github.com/vuejs/vue-cli/issues/1879#issuecomment-435194932
I have managed to get rid of the Jest error by editing the .babelrc file:-通过编辑 .babelrc 文件,我设法摆脱了 Jest 错误:-
{
"presets": [
"@babel/react" ,
"@babel/env"
],
"plugins": [
"@babel/plugin-proposal-class-properties"
]
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.