如何在jest和中使用d3.js v7？

Question

我有一些使用D3.jsv6.7.0的react项目，我可以在windows 10上用jest 27.2.0测试它。

我在jest.config.js中设置的一部分

testEnvironment: "jsdom",
testRunner: "jest-jasmine2",
transform: {
    '^.+\\.jsx?$': 'babel-jest',
},
transformIgnorePatterns: [
     "\\\\node_modules\\\\"
],

我在webpack.config.js中设置的一部分

module: {
    rules: [
      {
        test: /\.(jsx|js)$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
      },

如果我将d3.js升级到使用模块的7.0.1版本，则在运行测试时会出现以下错误：

Test suite failed to run

    Jest encountered an unexpected token

    Jest failed to parse a file. This happens e.g. when your code or its dependencies use non-standard JavaScript syntax, or when Jest is not configured to support such syntax.

    Out of the box Jest supports Babel, which will be used to transform your files into valid JS based on your Babel configuration.

    By default "node_modules" folder is ignored by transformers.

    Here's what you can do:
     • If you are trying to use ECMAScript Modules, see https://jestjs.io/docs/ecmascript-modules for how to enable it.
     • To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
     • If you need a custom transformation specify a "transform" option in your config.
     • If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.

    You'll find more details and examples of these config options in the docs:
    https://jestjs.io/docs/configuration
    For information about custom transformations, see:
    https://jestjs.io/docs/code-transformation

    Details:

    C:\python_env\workspace\visualization\frontEnd\node_modules\d3\src\index.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,jest){export * from "d3-array";

=>如何调整我的配置以使我的测试再次运行？

( a)我尝试使用修改过的webpack测试脚本和交叉env启用实验节点特性：

cross-env NODE_OPTIONS=--experimental-vm-modules jest

( b)我试着修改transformIgnorePatterns的笑话

transformIgnorePatterns: [
     "/node_modules/(?!(d3.*))"
  ],

( c)我试图为webpack babel-加载器包括节点_模块/d3。

但是，我还没有找到一个工作配置。

相关：

https://github.com/nrwl/nx/issues/812

https://github.com/webpack/webpack/issues/2031

How to write Jest transformIgnorePatterns

unexpected token "export" in webpack build

Answer 1

我也遇到了同样的问题，我可以通过为moduleNameMapper配置jest.config.js来修复(或者更确切地说是解决这个问题)。我没有任何合理的方法来映射它，所以我只创建了一个名为test/d3.js的文件，其中只包含一个注释，解释了它的用途。

在jest.config.js中，配置最终看起来如下所示

  moduleNameMapper: {
    "^d3$": "<rootDir>/test/d3.js"
  },