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

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


当前回答

我所要做的就是将开发依赖中的@babel/preset-env包更新到最新版本

// package.json
"@babel/preset-env": "^7.18.6"

其他回答

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

如果你正在使用Babel 6,试试这个东西

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

or

对于我的案例,导入问题是由于将react文件添加到transformIgnorePatterns中而导致的

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

在包中添加测试脚本。——experimental-vm-modules . json

这样就不需要通天塔或其他依赖项。

例子:

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

如果你得到这个错误:zsh: command not found: jest,尝试用节点传递jest.js,像这样:

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

我发现,当您尝试加载为浏览器制作的依赖项时,可能会触发此错误,因此不能使用jest (node)。

我在解决@zip.js/zip.js lib的这个问题时遇到了很多麻烦。但我可以这样做:

这是我的jest.config.js。根据你的需要调整它。这里的技巧是moduleNameMapper,它将使所有对zip.js的导入指向我在根文件夹中创建的__mocks__/@zip.js/zip.js文件。

export default {
  preset: 'ts-jest',
  testEnvironment: 'node',
  moduleNameMapper: {
    '@zip.js/zip.js': '<rootDir>/__mocks__/@zip.js/zip.js',
  },
}

下面是我在<rootDir>/__mocks__/@zip.js/zip.js文件中的内容:

module.exports = {}

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

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

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

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