Jest在ReactJS应用程序中遇到意外令牌

如何解决Jest在ReactJS应用程序中遇到意外令牌

测试时出现开玩笑的错误：-

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);
});

我试图在线进行研究，但是我认为我的配置文件有问题。

所以我有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"
    ]
}

}

这是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","json","node"
],"globals": {
    "window": {}
},// Setup Enzyme
"snapshotSerializers": ["enzyme-to-json/serializer"],"setupTestFrameworkScriptFile": "<rootDir>/src/setupEnzyme.ts",

}

这是我的.babelrc

{
"presets": [
    [
      "@babel/preset-react"
    ]
  ]

}

此配置正确吗？我想念什么吗？

感谢您的帮助和时间！

解决方法

最有可能在更新程序包依赖项时，“ babel-core”依赖项可能已更新为6.xx.x，应该是“ 7.0.0-bridge.0”，以便开玩笑。

参考：https://github.com/vuejs/vue-cli/issues/1879#issuecomment-412300256 https://github.com/vuejs/vue-cli/issues/1879#issuecomment-435194932

,

通过编辑.babelrc文件，我设法摆脱了Jest错误：-

{
  "presets": [
      "@babel/react","@babel/env" 
  ],"plugins": [
      "@babel/plugin-proposal-class-properties"
  ]
}