javascript - 使用最新版本的 d3-path 配置 jest

Question

出于某种原因，我的 Jest 配置不适用于最新版本的 <a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="781c4b5508190c10384b56485649" rel="noreferrer noopener nofollow">[email protected]</a> 。它与版本 2.0.0 配合得很好。我猜这与d3-path有关切换到ESM，但我已经在自己的代码中使用ES6，所以我不明白为什么它突然不再工作了。我安装了以下软件包:

"dependencies": {
  "d3-path": "^3.0.1"
},
"devDependencies": {
  "@babel/core": "^7.15.8",
  "@babel/preset-env": "^7.15.8",
  "babel-jest": "^27.3.1",
  "jest": "^27.3.1"
}

我的babel.config.js :

module.exports = {
  presets: [['@babel/preset-env', {targets: {node: 'current'}}]],
};

我的index.js :

import { path } from 'd3-path'

export default () => path()

测试文件:

import fn from '../src/index.js'

describe('test', () => {
  it('works', () => {
    fn()
    expect(2 + 2).toBe(4)
  })
})

错误信息:

    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,jest){export {default as path} from "./path.js";
                                                                                      ^^^^^^

    SyntaxError: Unexpected token 'export'

    > 1 | import { path } from 'd3-path'

重现:

git clone https://github.com/luucvanderzee/jest-problem.git
cd jest-problem
npm i
npm run test
// The test runs without failure- this is because we're currently still using <a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="9afea9b7eafbeef2daa8b4aab4aa" rel="noreferrer noopener nofollow">[email protected]</a>
npm uninstall d3-path && npm install d3-path // (upgrade to <a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a2c6918fd2c3d6cae2918c928c93" rel="noreferrer noopener nofollow">[email protected]</a>)
npm run test
// Now the test fails.

我应该如何配置 jest 和/或 babel 来解决这个问题？

编辑:

我已经尝试了以下操作(来自 jest 文档的 this 页面):

1. 创建 jest.config.js文件包含以下内容:

module.exports = {
  transform: {}
}

改变我的"test"来自 "jest" 的命令至"node --experimental-vm-modules node_modules/jest/bin/jest.js"

这给了我另一个错误:

    /home/luuc/Projects/javascript/jest-problem/test/test.test.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,jest){import fn from '../src/index.js'
                                                                                      ^^^^^^

    SyntaxError: Cannot use import statement outside a module

我也不明白什么意思

     • To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.

问题是不是模块没有转化的？添加忽略模式不仅会导致模块不被转换吗？

Answer 1

问题

出现这个错误是因为jest默认没有发送node_modules的内容给babel转换。

以下npm run test输出行指出了解决该问题的一种方法:

 • To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.

解决方案

应更新 jest 的配置，以指示其转换 d3-path 依赖项中存在的 ESM 代码。

为此，请将以下内容添加到项目根目录中的 jest.config.js 文件中:

module.exports = {
 transformIgnorePatterns: ['node_modules/(?!(d3-path)/)']
}

npm run test 之后运行良好。

transformIgnorePatterns 选项是 documented here .

编辑 - 包括更多模块

为了包含以 d3 开头的所有模块，可以使用以下语法:

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