如何将 d3.js v7 与 jest 和 babel-loader 一起使用？

Question

我有一些使用 d3.js v6.7.0 的 React 项目，我可以在 Windows 10 上使用 jest 27.2.0 对其进行测试。

\n

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

\n

testEnvironment: "jsdom",\ntestRunner: "jest-jasmine2",\ntransform: {\n    \'^.+\\\\.jsx?$\': \'babel-jest\',\n},\ntransformIgnorePatterns: [\n     "\\\\\\\\node_modules\\\\\\\\"\n],\n

\n

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

\n

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

\n

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

\n

Test suite failed to run\n\n    Jest encountered an unexpected token\n\n    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.\n\n    Out of the box Jest supports Babel, which will be used to transform your files into valid JS based on your Babel configuration.\n\n    By default "node_modules" folder is ignored by transformers.\n\n    Here\'s what you can do:\n     \xe2\x80\xa2 If you are trying to use ECMAScript Modules, see https://jestjs.io/docs/ecmascript-modules for how to enable it.\n     \xe2\x80\xa2 To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.\n     \xe2\x80\xa2 If you need a custom transformation specify a "transform" option in your config.\n     \xe2\x80\xa2 If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.\n\n    You\'ll find more details and examples of these config options in the docs:\n    https://jestjs.io/docs/configuration\n    For information about custom transformations, see:\n    https://jestjs.io/docs/code-transformation\n\n    Details:\n\n    C:\\python_env\\workspace\\visualization\\frontEnd\\node_modules\\d3\\src\\index.js:1\n    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,jest){export * from "d3-array";\n

\n

=> 我应该如何调整我的配置才能再次运行我的测试？

\n

a) 我尝试使用改编的 webpack 测试脚本和跨环境启用实验性节点功能：

\n

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

\n

b）我尝试调整开玩笑的transformIgnorePatterns

\n

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

\n

c) 我尝试为 webpack babel-loader 包含 node_modules/d3

\n

但是，我还没有找到有效的配置。

\n

有关的：

\n

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

\n

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

\n

如何编写 Jest 变换忽略模式

\n

webpack 构建中意外的令牌“导出”

\n

Answer 1

我遇到了完全相同的问题，并且能够通过配置moduleNameMapperfor来解决（或者更确切地说解决）这个问题d3。我没有任何明智的方法可以将其映射到，因此我只是创建了一个名为 的文件，test/d3.js该文件仅包含一条注释来解释它的用途。

配置最终看起来像这样jest.config.js：

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