如何解决“不能在模块外使用导入语句”在开玩笑

我有一个React应用程序(不使用创建React应用程序)，使用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();
});

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

当前回答

问题可能是jest本身不支持esmodule。这可能会导致问题，如果你的typescript目标是es6或更大。

如果你正在测试构建的typescript输出，你可以在编译时添加一个module=commonjs标志。这样，您的代码可以在es6或更高版本上运行，并且仍然可以使用Jest。

"scripts": {
  "test": tsc --module commonjs && jest {your-output-folder}/
}

这样做的好处是我不需要添加任何额外的通天塔依赖项或特殊的笑话运行器:)

2021-11-03 19:34:47

其他回答

使用Babel编译这些JS模块，你就可以用es6编写你的测试了。

安装巴别塔/ preset-env

npm i -D @babel/preset-env

创建一个带有预设的babel配置文件

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

2019-12-25 20:52:48

匹配的文件扩展名:

我导入一个名为Todo的文件。./src/Todo/。当我把它改成Todo.js时，问题就消失了。

免责声明:我不确定组件的文件扩展名是jsx还是js的要求是什么。它完全没有影响到我，但我可以想象它可能会扰乱智能感知或片段。

2021-05-27 19:25:35

我通过在package中的run语句后面添加模式来解决这个问题。json跑步

{
  "scripts": {
    ...
    "test": "react-scripts test --transformIgnorePatterns 'node_modules/(?!my-library-dir)/'"
    ...

然后，运行npm test

2021-08-25 21:23:06

我个人遵循@ajwl设置，但发现jsdom-worker在setupFiles:节的jest.config.js触发同样的错误。一旦移除，我的测试就通过了。

附注:我的babel.config.js有点不同，因为我有一个Vuejs (v2) SPA(与Vitejs捆绑):

module.exports = {
  plugins: ['@babel/plugin-transform-modules-commonjs'],
  presets: [['@babel/preset-env', { targets: { node: 'current' } }]]
}

2021-10-02 17:50:29

运行npm ci为我解决了这个问题。

2022-05-25 22:47:46

如何解决“不能在模块外使用导入语句”在开玩笑

推荐文章

最新文章

标签