如何解决jest中的“不能在模块外使用导入语句”

Question

我有一个React应用程序（不使用createreact应用程序），它是使用TypeScript、Jest、Webpack和Babel构建的。当尝试运行“纱线玩笑”时，我得到以下错误：

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

依赖项包括。。。

"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。配置。js！令人震惊。

Answer 2

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

npm i-D@babel/preset env

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

Answer 3

还使用巴别塔、打字和笑话。同样的失败，让我疯狂了好几个小时。最终创建了一个新的babel。配置。js文件专门用于测试。有一个很大的。无论我对babelrc做了什么，它都不会被人取笑。主应用程序仍然使用。babelrc，因为这会覆盖babel。配置。js文件。

安装jest、ts jest和babel jest：

npm i jest ts-jest babel-jest

巴贝尔。配置。js（仅限jest使用）

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

jest.config.js

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

包。json

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