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

Question

由于某些原因，我的jest配置不能与最新版本的d3-path@3.0.1一起工作。它在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"
}

Mybabel.config.js:

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

Myindex.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 d3-path@2.0.0
npm uninstall d3-path && npm install d3-path // (upgrade to d3-path@3.0.1)
npm run test
// Now the test fails.

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

编辑:

我已经尝试了以下方法(从这一页的jest文档):

1. 创建jest.config.js文件，内容如下:

module.exports = {
transform: {}
}

2. 将"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选项记录在这里。

编辑-包括更多模块

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

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

Answer 2

TLDR;

transformIgnorePatterns: [
"/node_modules/(?!d3|d3-array|d3-axis|d3-brush|d3-chord|d3-color|d3-contour|d3-delaunay|d3-dispatch|d3-drag|d3-dsv|d3-ease|d3-fetch|d3-force|d3-format|d3-geo|d3-hierarchy|d3-interpolate|d3-path|d3-polygon|d3-quadtree|d3-random|d3-scale|d3-scale-chromatic|d3-selection|d3-shape|d3-time|d3-time-format|d3-timer|d3-transition|d3-zoom}|internmap|d3-delaunay|delaunator|robust-predicates)"
]

对于更新recharts依赖后到达此页面的人，在这里我找到了解决方案，由他们提供。