React应用:Jest遇到意外令牌

我尝试测试通过create-react-app创建的应用。只有一个自动生成的测试文件:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

it('renders without crashing',() => {
  const div = document.createElement('div');
  ReactDOM.render(<App />,div);
  ReactDOM.unmountComponentAtNode(div);
});

这是我的package.json(我也有package-lock.json(〜15k行)):

   {
      "name": "project","version": "0.1.0","private": true,"dependencies": {
        "avro-js": "^1.9.1","axios": "^0.19.0","bootstrap": "^4.3.1","jquery": "^3.4.1","prop-types": "^15.7.2","react": "^16.10.2","react-dom": "^16.10.2","react-redux": "^7.1.1","react-scripts": "3.2.0","react-syntax-highlighter": "^11.0.2","reactstrap": "^8.0.1","redux": "^4.0.4","redux-thunk": "^2.3.0"
      },"scripts": {
        "start": "react-scripts start","build": "react-scripts build","test": "react-scripts test","eject": "react-scripts eject"
      },"eslintConfig": {
        "extends": "react-app"
      },"browserslist": {
        "production": [
          ">0.2%","not dead","not op_mini all"
        ],"development": [
          "last 1 chrome version","last 1 firefox version","last 1 safari version"
        ]
      }
    }

当我尝试使用测试脚本对其进行测试时,出现此错误:

  

Jest遇到意外令牌

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".
     

详细信息:

({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){export
     

{默认为'./a11y-dark'中的a11yDark};

此外,我没有.babelrc文件。我尝试添加.babelrc,但没有帮助(或者我做错了)

a21221266 回答:React应用:Jest遇到意外令牌

所以,终于我解决了这个问题。 我的最终配置是:

babel.config.js

module.exports = {
    presets: ['@babel/preset-env','@babel/preset-react'],};

package.json

{
  "name": "project","version": "1.0","private": true,"dependencies": {
    "avro-js": "^1.9.1","axios": "^0.19.0","bootstrap": "^4.3.1","jquery": "^3.4.1","prop-types": "^15.7.2","react": "^16.10.2","react-dom": "^16.10.2","react-redux": "^7.1.1","react-scripts": "3.2.0","react-syntax-highlighter": "^11.0.2","reactstrap": "^8.0.1","redux": "^4.0.4","redux-thunk": "^2.3.0"
  },"jest": {
    "transformIgnorePatterns": [
      "/node_modules/(?!(react-syntax-highlighter)/)"
    ]
  },"devDependencies": {
    "@babel/cli": "^7.0.0","@babel/core": "^7.0.0","@babel/preset-env": "^7.0.0","@babel/preset-react": "^7.0.0","babel-core": "^7.0.0-bridge.0","babel-eslint": "^10.0.3","babel-jest": "^24.9.0","babel-loader": "^8.0.0","enzyme": "^3.10.0","enzyme-adapter-react-16": "^1.15.1","eslint": "^6.7.1","jest": "^24.9.0","jest-cli": "^24.9.0","react-test-renderer": "^16.12.0","redux-mock-store": "^1.5.3"
  },"scripts": {
    "start": "react-scripts start","build": "react-scripts build","test": "react-scripts test","eject": "react-scripts eject"
  },"eslintConfig": {
    "extends": "react-app"
  },"browserslist": {
    "production": [
      ">0.2%","not dead","not op_mini all"
    ],"development": [
      "last 1 chrome version","last 1 firefox version","last 1 safari version"
    ]
  }
}

我不确定这是否是最好的解决方案,但至少能奏效

,

如果在尝试导入组件的javascript样式时遇到此错误,请确保定位到目标

react-syntax-highlighter/dist/cjs/...

代替

react-syntax-highlighter/dist/esm/...

玩笑应该能够解析它。

本文链接:https://www.f2er.com/3121580.html

大家都在问