Question

作为课程的一部分，我需要使用 React 和 Redux 从头开始构建一个 Web 应用。

我花了几天时间尝试设置所有内容，同时尝试配置所有必要的设置，以使用 Jest 和 Enzyme 测试应用程序。

然而，我所尝试的一切都导致了某种形式的错误消息，导致测试无法运行。

老实说，我不知道我做错了什么，但它似乎一团糟。

有谁知道为什么我的测试的错误消息标记了 React 导入？ 语法错误：不能在模块外使用导入语句

这是我的 package.json 文件：

  {"type": "module",
  "name": "reddit-client",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@reduxjs/toolkit": "^1.5.1",
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.3.2",
    "@testing-library/user-event": "^7.1.2",
    "babel-jest": "^26.6.3",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-redux": "^7.2.3",
    "react-scripts": "^1.1.5"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "jest",
    "eject": "react-scripts eject",
    "test:watch": "npm test -- --watch"
  },
  "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"
    ]
  },
  "transform": {
    "\\.js$": "<rootDir>/node_modules/babel-jest"
  },
  "devDependencies": {
    "@wojtekmaj/enzyme-adapter-react-17": "^0.6.2",
    "enzyme": "^3.11.0",
    "jest": "^26.6.0",
    "jest-enzyme": "^7.1.2"
  }
}

连同我的 .babelrc 文件：

{
  "presets": ["@babel/preset-env", "@babel/preset-react"],
  "transformIgnorePatterns": [
  "node_modules/(?!(babel-jest)/)"
  ]
}

还有测试本身，它没有任何代码。但据我所知，这在这一点上应该无关紧要？：

import React from 'react';
import Header from './Header.js';
import {shallow } from 'enzyme';

it('should render without errors', () => {

});

您能给我的任何建议让它运行起来，我们将不胜感激！

Answer 1

您可以使用 @babel/plugin-transform-modules-commonjs 将您的模块转换为 commonjs。

这是您当前的 .babelrc 文件，但带有插件：

{
  "presets": ["@babel/preset-env", "@babel/preset-react", "@babel/plugin-transform-modules-commonjs"],
  "transformIgnorePatterns": [
  "node_modules/(?!(babel-jest)/)"
  ]
}

记得安装 @babel/plugin-transform-modules-commonjs。

我不确定这是否会消除您的错误，因为您没有提供最小的可重现示例，但我很确定它会起作用。

Answer 2

您是否定义了适配器？

（进口）。
从“酶”导入酶；
从“@wojtekmaj/enzyme-adapter-react-17”导入适配器；

（适配器）。
Enzyme.configure({adapter: new Adapter() });

我相信，我也面临着类似的问题，直到我添加了适配器，然后测试很顺利。

导入 React = 'SyntaxError: 不能在模块外使用导入语句'

2 个答案: