运行测试时如何解决 Jest 中的“无法在模块外使用导入语句”？

Question

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

我已经尝试删除所有包并重新添加它们。它没有解决这个问题。我看了类似的问题并留档，但我仍然不明白一些事情。我甚至按照另一个指南从头开始设置这个环境，但仍然收到了我的代码的这个问题。

依赖项包括...

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

我希望能够在我的组件中使用命名导入，而不会破坏我的测试。如果我在整个解决方案中只使用默认导入，似乎可以解决这个问题，但是我不想走这条路。

Answer 1

我通过将.babelrc文件迁移到babel.config.js来解决这个问题！震惊。

Answer 2

使用Babel转译这些JS模块，您将能够使用es6编写测试。

npm i -D @babel/preset-env

//babel.config.js
module.exports = {presets: ['@babel/preset-env']}

Answer 3

我也有同样的失败(也使用Babel，Typescript和Jest)，它让我疯狂了几个小时！

最终创建了一个专门用于测试的新 babel.config.js 文件。我有一个大的.babelrc，无论我对它做什么，它都不会被开玩笑。主应用程序仍然使用 .babelrc，因为这会覆盖 babel.config.js 文件。

我采取的步骤：

安装 jest、ts-jest 和 babel-jest：

npm i jest ts-jest babel-jest

添加 babel.config.js（仅供 jest 使用）

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

在< code>jest.config.js中，更新至:

module.exports = {
  preset: 'ts-jest',
  transform: {
    '^.+\\.(ts|tsx)?$': 'ts-jest',
    "^.+\\.(js|jsx)$": "babel-jest",
  }
};

< code>package.json

  "scripts": {
    "test": "jest"