使用 Jest 和 React 测试失败

时间:2021-05-20 19:23:57

标签: reactjs unit-testing jestjs enzyme

我正在尝试在我的 React 项目中执行一些单元测试,但仍然出现相同的错误。

yarn run v1.22.10
$ jest
 FAIL  src/test.spec.js
  ● Test suite failed to run

    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:
     • If you are trying to use ECMAScript Modules, see https://jestjs.io/docs/en/ecmascript-modules for how to enable it.
     • 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.

    You'll find more details and examples of these config options in the docs:
    https://jestjs.io/docs/en/configuration.html

    Details:

    /Users/user/ui/src/setupTests.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import Enzyme from 'enzyme';
                                                                                             ^^^^^^

    SyntaxError: Cannot use import statement outside a module

      at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1350:14)

Test Suites: 1 failed, 1 total
Tests:       0 total
Snapshots:   0 total
Time:        0.486 s
Ran all test suites.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

语法错误显然是由我为自定义 Jest 环境所做的 setupTests.js 文件引起的:

import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

Enzyme.configure({ adapter: new Adapter() });

import fetch from 'node-fetch';
global.fetch = fetch;

这是我的 package.json 文件:

{
  "name": "ui",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@animated-burgers/burger-squeeze": "^1.1.2",
    "@duik/icon": "^0.4.0",
    "@duik/it": "^0.4.1",
    "chart.js": "^2.8.0",
    "classnames": "^2.2.6",
    "lodash.defaultsdeep": "^4.6.0",
    "moment": "^2.24.0",
    "node-sass": "4.14.1",
    "prismjs": "^1.16.0",
    "react": "^16.9.0",
    "react-chartjs-2": "^2.7.6",
    "react-dom": "^16.9.0",
    "react-router-dom": "^5.0.1",
    "react-scripts": "^3.1.1",
    "typescript": "^3.5.3"
  },
  "scripts": {
    "eject": "react-scripts eject",
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "build:dist": "cross-env DIST=true react-app-rewired build && react-snap && prettier run --write 'build/**/*.css' && prettier run --write 'build/**/*.html'",
    "postbuild": "react-snap",
    "deploy": "yarn build && now --target production",
    "test": "react-app-rewired test --env=jsdom",
    "test": "jest",
    "test:watch": "jest --watch",
    "test:coverage": "jest --coverage"
  },
  "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"
    ]
  },
  "devDependencies": {
    "cross-env": "^6.0.0",
    "enzyme": "^3.11.0",
    "enzyme-adapter-react-16": "^1.15.6",
    "jest": "^26.6.3",
    "node-fetch": "^2.6.1",
    "prettier-eslint": "^9.0.0",
    "react-app-rewired": "^2.1.8",
    "react-snap": "^1.23.0",
    "react-test-renderer": "^17.0.2"
  }
}

我不明白为什么会出现此错误。我什至从头开始尝试使用一个简单的 React 项目,但仍然得到相同的结果。我做错什么了吗?好吧,似乎我做到了,但我看不到在哪里..我在这里和其他平台上检查了一些其他答案,但即使它们太旧了我在理解目的的同时尝试了..但我仍然有错误。< /p>

0 个答案:

没有答案