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

我有一个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();
});

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

当前回答

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

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

然后，运行npm test

2021-08-25 21:23:06

其他回答

对我来说，重命名文件为babel.config.js是有效的。下面是我的NX项目配置文件，使用Typescript和twin -宏next


// .babelrc.js >> babel.config.js
module.exports = {
  presets: [
    [
      "@nrwl/react/babel",
      {
        "runtime": "automatic",
        "targets": {
          "browsers": [">0.25%", "not dead"]
        },
        "preset-react": {
          runtime: "automatic",
          importSource: "@emotion/react",
        },
      }
    ],
    '@babel/preset-env',
    '@emotion/babel-preset-css-prop',
    '@babel/preset-typescript'
  ],
  plugins: ['@emotion', 'macros', '@babel/plugin-transform-runtime', 'react-docgen'],
}

另外，请注意甚至更新包。json的作品, https://kulshekhar.github.io/ts-jest/docs/getting-started/presets/#basic-usage

// package.json
"jest": {
    // Replace `ts-jest` with the preset you want to use
    // from the above list
    "preset": "ts-jest"
  }

2022-04-07 07:22:13

解决方案:我的命名导入来自index.js文件，我相信ts-jest需要它们作为索引。ts文件(我使用Typescript)。如果其他人遇到这个错误，检查一下你的文件扩展名是否出错也无妨。

不幸的是，我在这上面浪费了很多时间，但是我学到了很多关于webpack配置和Babel的知识。

2019-10-30 18:38:33

在主目录上创建.babelrc，添加这些代码并安装这些包 @babel/core， @babel/预设-env和@babel/预设-react

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "modules": "commonjs"
      }
    ],
    "@babel/preset-react"
  ]
}

2021-10-13 13:01:20

回答这个问题已经太迟了:) 在尝试了所有可能的解决方案后，这对我来说是有效的: 我的解决方案是:

创建一个名为jest/mocks/@react-native-firebase/crashlytics.js的文件 export default () => ({log: jest.fn()， recordError: jest.fn()，});

创建名为jest/jestSetupFile.js的文件 import mockFirebaseCrashlytics from './mocks/@react-native-firebase/crashlytics';

害怕。mock('@react-native-firebase/crashlytics'， () => mockFirebaseCrashlytics);

在包中.json 添加 “jest”： { “setupFiles”： [“./jest/jestSetupFile.js”] }，

2022-11-24 10:36:04

如果你在使用TypeScript，你有一个tsconfig。Json文件，尝试删除"module": "esnext"，如果你正在使用它

2021-07-01 16:48:23

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

推荐文章

最新文章

标签