如何在玩笑中解决“无法在模块外部使用导入语句”

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

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

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"

Answer 2

匹配文件扩展名：

我将根目录中名为 Todo.jsx 的文件导入为 ./src/Todo/。每当我将其更改为 Todo.js 时，问题就消失了。

免责声明：我不确定将组件的文件扩展名设为 jsx 与 js 的要求是什么。它根本没有影响我，但我可以想象它可能会干扰智能感知或片段。

Answer 3

为了将来参考，

在阅读Logan Shoemaker的答案后，我通过使用下面的jest配置解决了这个问题。

module.exports = {
  verbose: true,
  setupFilesAfterEnv: ["<rootDir>src/setupTests.ts"],
  moduleFileExtensions: ["js", "jsx", "ts", "tsx"],
  moduleDirectories: ["node_modules", "src"],
  moduleNameMapper: {
    "\\.(css|less|scss)$": "identity-obj-proxy"
  },
  transform: {
    '^.+\\.(ts|tsx)?$': 'ts-jest',
    "^.+\\.(js|jsx)$": "babel-jest",
    "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/file.js",
  }
};

Answer 4

如果您使用的是Babel 6，请尝试此操作

1）在babel.config.js的插件部分中添加@ babel / plugin-transform-modules-commonjs

或

2）在我的情况下，导入问题是由于将react文件添加到transfromIgnorePatterns中而导致的 “ transformIgnorePatterns”：[ “ / node_modules /（?! react-file-drop）” ]

Answer 5

我在Typescript，Jest和VueJS / VueCli 3上遇到了相同的问题。正常的构建没有问题。只为开玩笑而发生。我通过搜索奋斗了几个小时。但实际上没有答案。就我而言，我依赖于自己的打字稿包，我在 tsconfig.json 中指定了“ target”：“ es6” 。这是根本原因。因此，解决方案只是将依赖的（不是同一项目）更改回 es5 tsconfig.json：

{
  "compilerOptions": {
    "target": "es5",
    ...
  },
  ...
}

Answer 6

如果您使用的是 TypeScript，并且您有一个 tsconfig.json 文件，请尝试删除 "module": "esnext"（如果您正在使用它）

Answer 7

解决方案：我命名的导入来自index.js文件，我相信ts-jest需要它们作为index.ts文件（我正在使用Typescript）。如果还有其他人遇到此错误，检查您是否破坏了文件扩展名就可以了。

不幸的是，我在此上浪费了很多时间，但是我学到了很多有关webpack配置和Babel的信息。

Answer 8

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

安装Babel / preset-env

npm i -D @babel/preset-env

使用预设创建babel配置文件

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