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

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

package.json我通过简单地在runner中的 run 语句后面附加模式来修复它

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

然后，只需运行npm test

Answer 3

使用 Babel 转译那些 JS 模块，你就可以使用 es6 编写测试。

安装 Babel/preset-env

npm i -D @babel/preset-env

使用预设创建 babel 配置文件

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

Answer 4

以供将来参考，

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

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 5

我通过将.babelrc文件迁移到babel.config.js! 震惊。

Answer 6

如果你使用 babel 6 试试这个

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

或者

2. 对于我的情况，导入问题是由于将反应文件添加到transformIgnorePatterns

"transformIgnorePatterns": ["/node_modules/(?!react-file-drop)"]

Answer 7

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

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

Answer 8

令我惊讶的是，没有一个答案没有给出一个优雅的解决方案：

笑话配置.js

module.exports = {
  ...,
  globals: {
    "ts-jest": {
      isolatedModules: true,
    },
  },
};

这会单独编译每个文件，因此避免了无法导出的问题。

Answer 9

使用 Node 实验功能添加您的test脚本：package.json--experimental-vm-modules

这样你就不需要 babel 或其他依赖项。

例子：

"test": "NODE_OPTIONS='--experimental-vm-modules --experimental-specifier-resolution=node' jest"

如果您收到此错误：zsh: command not found: jest，请尝试像这样node传递：jest.js

"test": "NODE_OPTIONS='--experimental-vm-modules --experimental-specifier-resolution=node --trace-warnings' node node_modules/jest/bin/jest.js --detectOpenHandles"