Jest Unexpected token 'export' when using d3

Question

I have read many of the questions similar to mine, but none seem to fix my issue. I am using Vue3, TypeScript, Jest, and D3 v7. When I try to import * as d3 from "d3"; I get this error in my tests:

({"Object.<anonymous>":
  function(module,exports,require,__dirname,__filename,global,jest)
  {export * from "d3-array";

This error also occurs when I import d3 as such import { BaseType, Selection, Transition, select } from "d3";

I have tried updating my jest config's transformIgnorePatterns property to read but this doesn't work either:

transformIgnorePatterns: [
  "<rootDir>/node_modules/(?!d3-(array))",
]

Could someone explain to me the piece I am missing here? Also below is my entire jest.config.js file

module.exports = {
  collectCoverageFrom: [
    "**/src/**.ts", 
    "**/src/**/**.ts", 
    "!**/dist/**", 
    "!**/node_modules/**", 
    "!**/public/**"
  ],
  errorOnDeprecated: true,
  preset: "@vue/cli-plugin-unit-jest/presets/typescript",
  testMatch: ["**/*.spec.ts", "!**/node_modules/**"],
  testPathIgnorePatterns: ["<rootDir>/dist/", "<rootDir>/node_modules/"],
  "modulePaths": [
    "<rootDir>"
  ],
  transformIgnorePatterns: [
    "<rootDir>/node_modules/(?!d3-(array))",
  ],
  transform: {
    "^.+\\.ts": "ts-jest",
    "^.+\\.vue$": "vue-jest",
  },
};

Spiculum

Answer 1

A quick fix is to use the minified d3 build, which is already transpiled. Either import the minified build directly:

import * as d3 from 'd3/dist/d3.min'

demo 1

Or use a Jest config to map d3 to the minified build:

// jest.config.js
module.exports = {
  moduleNameMapper: {
    '^d3$': '<rootDir>/node_modules/d3/dist/d3.min.js',
  },
}

demo 2

If that's not an option, you can configure Jest to transpile d3 (and its dependencies that also require transpilation: internmap, delaunator, and robust-predicates):

// jest.config.js
module.exports = {
  transformIgnorePatterns: [
    '<rootDir>/node_modules/(?!d3|internmap|delaunator|robust-predicates)'
  ],
}

Note: The transpilation adds considerable time to the test run.

demo 3

Ybarra

For those using CRA: add this to package.json: "jest": { "moduleNameMapper": { "^d3$": "<rootDir>/node_modules/d3/dist/d3.min.js" } – Empyema

This worked great with Next.js using the SWC compiler (where configuring Jest to transpile the files with Babel isn't an option). Thanks! – Baugher

For the latest nivo (0.83.0) I ran into this error for d3-colors. Here's my fix: 'd3-colors': '<rootDir>/node_modules/d3-colors/dist/d3-colors.min.js', – Tweeddale

@Ybarra thank you so much for this answer; to add my 50 cents here: using moduleNameMapper if your module provides a minified version is much faster than transpiling with transformIgnorePatterns every time the tests run – Bradytelic

Answer 2

Following the tip from Tiep Phan's answer I added the following to my package.json file:

"jest": {
    "transformIgnorePatterns": ["/node_modules/(?!d3|d3-array|internmap|delaunator|robust-predicates)"] },

Cornia

Answer 3

You can add this to the jest.config. The answer is from the jest GitHub issue #14911:

// jest.config.js
module.exports = {
    moduleNameMapper: {
        '^d3-(.+)$': '<rootDir>/node_modules/d3-$1/dist/d3-$1.js',
    },
};

Rhamnaceous

Answer 4

I had to do this to get ts-node, ts-jest and d3 all working together

jest.config.mjs

export default {
  testEnvironment: 'node',
  extensionsToTreatAsEsm: ['.ts'], // essential
  transform: {
    '^.+\\.tsx?$': [
      'ts-jest',
      {
        useESM: true, // essential
      },
    ],
  },
};

package.json

{
  "type": "module",
    // ...
}

tsconfig.json

{
  "compilerOptions": {
    "target": "ESNext", // wasn't essential but seemed like a good idea
    "module": "ESNext", // essential
    "moduleResolution": "node", // or "node10"
    "allowSyntheticDefaultImports": true, // essential
    // ...

  }
}

Test command:

node  --experimental-vm-modules node_modules/.bin/jest
# or node --no-warnings --experimental-vm-modules node_modules/.bin/jest 

Run command

node --loader ts-node/esm  ./src/index.ts

Megaton