如何解决“无法在模块外使用导入语句”的问题

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

我希望能够在我的组件中使用命名导入，而不会导致测试失败。如果我只通过我的解决方案使用默认导入，它似乎可以解决这个问题，但我宁愿不走那条路。

原文由 Logan Shoemaker 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

还使用 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 （仅用于开玩笑）

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

jest.config.js

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

package.json

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

原文由 ajwl 发布，翻译遵循 CC BY-SA 4.0 许可协议