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

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


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

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


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

安装巴别塔/ preset-env

npm i -D @babel/preset-env

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

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

为方便将来参考,

在阅读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",
  }
};

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

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

or

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

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


我在Typescript、Jest和VueJS/VueCli 3中遇到了同样的问题。正常的构建没有问题。只有杰斯特才会这样。我苦苦寻找了几个小时。但是没有一个答案真的有效。在我的例子中,我有一个依赖于我自己的typescript包,我在tsconfig.json中指定“target”:“es6”。这是根本原因。所以解决方案是简单地将依赖的(不是同一个项目)更改回es5 tsconfig.json:

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

我通过将.babelrc文件迁移到babel.config.js解决了这个问题!生活小常识。


还使用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"

匹配的文件扩展名:

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

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


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


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

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

然后,运行npm test


我个人遵循@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' } }]]
}

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

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

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

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

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

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


在包中添加测试脚本。——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"

我通过改变tsconfig来解决这个问题。Json到兼容的本机输出

"module": "commonjs", /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */

这并非在所有情况下都是理想的,但你可能会接受。


我很惊讶,没有一个答案不能给出一个优雅的解决方案:

jest.config.js

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

这将分别编译每个文件,从而避免了无法导出的问题。


对我来说,重命名文件为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"
  }

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


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

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

没有一个答案对我有帮助,帮助我的是确保我的NODE_ENV被设置为测试,因为babel配置是每个NODE_ENV使用错误的NODE_ENV,在babel配置中没有配置将意味着你不会使用babel, typescript文件不会被转换。

我花了几个小时来解决这个问题,所以我希望它能帮别人节省我花的时间。


不知道为什么,怎么解决的,但我解决问题的方法真的很有趣。 只需在src文件夹中添加__mocks__文件夹,并在__mocks__中创建一个名为axios.js的空文件


我发现,当您尝试加载为浏览器制作的依赖项时,可能会触发此错误,因此不能使用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/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”] },


我需要做几件事来让它为我工作

将我的.babelrc重命名为babel.config.js,并做一些改变:

// .babelrc
{
  "presets": [
    [
      "@babel/preset-env",
      {
        "corejs": "3.26",
        "useBuiltIns": "usage"
      }
    ],
    "@babel/preset-react"
  ],
  ...
}
// babel.config.js - This still works fine with webpack
module.exports = {
  "presets": [
    [
      "@babel/preset-env",
      {
        "corejs": "3.26",
        "useBuiltIns": "usage"
      }
    ],
    "@babel/preset-react"
  ],
  ...
}

添加以下到我的jest配置文件:

{
  ...  
  "transformIgnorePatterns": [
    "node_modules/(?!(react-leaflet-custom-control)/)"
  ],
  ...
}

react-传单-定制-控制是给我带来问题的包。