如何解决“不能在模块外部使用导入语句"?开玩笑 [英] How to resolve "Cannot use import statement outside a module" in jest

问题描述

我有一个使用TypeScript，Jest，Webpack和Babel构建的React应用程序(不使用Create React App).尝试运行"yarn jest"时，出现以下错误:

I have a React application (not using Create React App) built using TypeScript, Jest, Webpack, and Babel. When trying to run "yarn jest", I get the following error:

我尝试删除所有软件包并重新添加它们.它不能解决此问题.我看过类似的问题和文档，但仍然有些误解.我竟然遵循了另一本从头开始设置此环境的指南，但我的代码仍然收到此问题.

I have tried removing all packages and re-adding them. It does not resolve this. I have looked at similar questions and documentation and am still misunderstanding something. I went so far as to follow another guide for setting up this environment from scratch and still received this issue with my code.

依赖项包括...

"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";

测试文件......

The test file....

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

我希望能够在我的组件中使用命名的导入，而不会引起测试的失败.如果我仅通过解决方案使用默认导入，则似乎可以解决该问题，但我宁愿不走那条路.

I expected to be able to use named imports in my components without my tests blowing up. It appears to fix the issue if I only use default imports through my solution, but I would prefer to not go that route.

推荐答案

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

I solved this by migrating the .babelrc file to babel.config.js! Shocker.

这篇关于如何解决“不能在模块外部使用导入语句"?开玩笑的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！