Configure jest with latest version of d3-path

Viewed 564

For some reason, my jest configuration doesn't work with the latest version of d3-path@3.0.1. It worked fine with version 2.0.0. I guess it has something to do with d3-path switching to ESM, but I was already using ES6 in my own code, so I don't get why it suddenly doesn't work anymore. I have the following packages installed:

"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"
}

My babel.config.js:

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

My index.js:

import { path } from 'd3-path'

export default () => path()

The test file:

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

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

The error message:

    ({"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'

To reproduce:

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.

How should I configure jest and/or babel to solve this issue?

EDIT:

I already tried the following (from this page of the jest docs):

  1. Creating a jest.config.js file with the following:
module.exports = {
  transform: {}
}
  1. Changing my "test" command from "jest" to "node --experimental-vm-modules node_modules/jest/bin/jest.js"

This gives me another error:

    /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

I also don't get what is meant by

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

Isn't the problem that the module is not transformed? Would adding an ignore pattern not just lead to the module not getting transformed?

2 Answers

Problem

The error happens because jest does not send the content of node_modules to be transformed by babel by default.

The following output line of npm run test indicates one way to solve the problem:

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

Solution

The configuration of jest should be updated in order to instruct it to transform the ESM code present in d3-path dependency.

To do so, add the following to a jest.config.js file in the root directory of the project:

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

npm run test runs fine after that.

The transformIgnorePatterns option is documented here.

Edit - including more modules

In order to include all modules starting with d3, the following syntax may be used:

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

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)"
]

For the ones reaching this page after updating recharts dependency, here I found the solution, provided by them.

Related