如何解决在运行Jest测试时出现的“Cannot use import statement outside a module”的问题？

Question

如何解决在运行Jest测试时出现的“Cannot use import statement outside a module”的问题？

reactjsjestjsbabeljsbabel-jestts-jest

335

我有一个使用TypeScript、Jest、Webpack和Babel构建的React应用程序（不使用Create React App）。在尝试运行yarn jest时，我收到以下错误：

jest error

我尝试过删除所有软件包并重新添加它们，但这并不能解决问题。我查看了类似的问题和文档，但仍然不理解其中的某些内容。我甚至按照另一个从头设置此环境的指南，仍然在我的代码中遇到了这个问题。

依赖项包括...

"dependencies": {
  "@babel/plugin-transform-runtime": "^7.6.2",
  "@babel/polyfill": "^7.6.0",
  "babel-jest": "^24.9.0",
  "react": "^16.8.6",
  "react-dom": "^16.8.6",
  "react-test-renderer": "^16.11.0",
  "source-map-loader": "^0.2.4"
},
"devDependencies": {
  "@babel/core": "^7.6.0",
  "@babel/preset-env": "^7.6.0",
  "@babel/preset-react": "^7.0.0",
  "@types/enzyme": "^3.9.2",
  "@types/enzyme-adapter-react-16": "^1.0.5",
  "@types/jest": "^24.0.13",

组件的导入行...

import * as React from "react";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import HomePage from "./components/pages";
import {
  Footer,
  Header,
  Navigation,
} from "./components/shared";

测试文件包含用于验证软件或系统功能的测试套件和用例。在开发过程中，经常需要运行测试以确保代码或产品符合预期。测试文件还可以包括结果报告和其他有关测试执行的信息。

import * as React from "react";
import * as renderer from "react-test-renderer";
import App from "../App";

it("Renders the Footer correctly", () => {
  const tree = renderer
    .create(<App />)
    .toJSON();
  expect(tree).toMatchSnapshot();
});

我希望在我的组件中使用具名导入而不会导致我的测试失败。如果我只在整个解决方案中使用默认导入，似乎可以修复此问题，但我更希望不采用这种方法。

- Logan Shoemaker

2

顺便提一下，当我为Jest设置自定义TestSequencer时遇到了这个问题，我只是在这个文件中切换到使用require而不是import。 - Joshua Pinter

这可能是由于环境变量问题引起的。请参见我的其他相关答案：https://dev59.com/Aqfja4cB1Zd3GeqP2uMm#63749183 - Bence Szalai

如果有人目前遇到这个问题，这个解决方案在我的情况下修复了这个错误。https://github.com/react-hook-form/resolvers/issues/396#issuecomment-1114248072 - diemondtank

@diemondtank，这显然是一个特定于包（hookform）的解决方案。我在resolver.js中看到了if (pkg.name === '@hookform/resolvers')。 - 丶 Limeー来夢丶

这似乎是Jest中的一个错误引起的：https://github.com/facebook/jest/issues/8365 - Elias Zamaria

28个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Jianwu Chen · Answer 1

我在使用Typescript、Jest和VueJS/VueCli 3时遇到了同样的问题。正常构建没有问题，只有在Jest中出现了问题。我花了几个小时的时间进行搜索，但是没有一个答案能够解决我的问题。在我的情况下，我依赖于自己的typescript包，在tsconfig.json中指定了"target": "es6"。这就是根本原因。所以解决方案很简单，只需要将依赖项（不是同一项目）的tsconfig.json更改回es5即可：

{
  "compilerOptions": {
    "target": "es5",
    ...
  },
  ...
}

- user17028407 · Answer 2

我所需要做的，就是在开发依赖项中将包@babel/preset-env更新到最新版本。

// package.json
"@babel/preset-env": "^7.18.6"

- j4ys0n · Answer 3

更新到最新版本。导入与jest 29.5.0和ts-jest 29.1.0兼容。

yarn upgrade jest ts-jest

jest.config.json

  "roots": ["<rootDir>/"],
  "collectCoverageFrom": ["src/*.ts", "src/**/*.ts"],
  "transform": {
    "^.+\\.ts?$": "ts-jest"
  },
  "testMatch": ["<rootDir>/**/?(*.)(spec|test).(ts|js)?(x)"]
}

- minlare · Answer 4

我使用pnpm，不得不将transformIgnorePatterns更改为正确的路径node_modules/.pnpm：

transformIgnorePatterns: ['/node_modules/.pnpm/(?!package-name)']

- Bonanza · Answer 5

这个答案来得太晚了 :)

在尝试了所有可能的解决方案后，这个对我有效：

创建一个名为jest/mocks/@react-native-firebase/crashlytics.js的文件

export default () => ({ log: jest.fn(), recordError: jest.fn(), });

创建一个名为jest/jestSetupFile.js的文件

import mockFirebaseCrashlytics from './mocks/@react-native-firebase/crashlytics';

jest.mock('@react-native-firebase/crashlytics', () => mockFirebaseCrashlytics);

在package.json中添加

"jest": { "setupFiles": ["./jest/jestSetupFile.js"] },

- Kirk Strobeck · Answer 6

将你的测试文件从'.js'重命名为'.ts'

- Sam Lahm · Answer 7

如果你正在使用TypeScript，并且有一个tsconfig.json文件，尝试将"module": "esnext"从中移除。

- Matheus · Answer 8

对我来说，运行npm ci解决了这个问题。