3.0.1 doesn't work with Jest

[slaweet]

When trying to upgrade d3-interpolate 2.0.1 -> 3.0.1, my Jest tests fail with:

  ● Test suite failed to run

    Jest encountered an unexpected token

    This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.

    By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".

    Here's what you can do:
     • To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
     • If you need a custom transformation specify a "transform" option in your config.
     • If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.

    You'll find more details and examples of these config options in the docs:
    https://jestjs.io/docs/en/configuration.html

    Details:

    /home/slaweet/git/frontend/node_modules/d3-interpolate/src/index.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){export {default as interpolate} from "./value.js";
                                                                                             ^^^^^^

    SyntaxError: Unexpected token 'export'

      129 | <script lang="ts">
      130 | import { Component, Prop, Vue } from 'vue-property-decorator';
    > 131 | import { interpolateRgb } from 'd3-interpolate';
          | ^
      132 | import BigNumber from 'bignumber.js';
      133 | import { Stats } from 'fast-stats';
      134 | import Color from 'color';

Using node v14.15.4

[Fil]

Yes. Please check if the Jest section in https://gist.github.com/sindresorhus/a39789f98801d908bbc7ff3ecc99d99c answers the use case? (linked from https://github.com/d3/d3-interpolate/releases/tag/v3.0.0).

[slaweet]

@Fil thank you for the hint.

If anyone stumbles upon this issue, the specific solution that works for me is:

// jest.config.js
moudle.exports = {
  <other_configs_in_this_file>,

  transformIgnorePatterns: [                                                                            
    '/node_modules/(?!d3-(interpolate|color))',                                                      
  ],
};

In particular beware that if you try only '/node_modules/(?!d3-interpolate)', you'll get the SyntaxError: Unexpected token 'export' error happening in d3-color, which is IMO quite tricky to spot that it's not still the same error.

[jboler]

I'm also seeing this:

    Details:

    /Users/me/app/node_modules/d3/src/index.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){export * from "d3-array";
                                                                                             ^^^^^^
    SyntaxError: Unexpected token 'export'

    > 1 | import { BaseType, Selection, Transition, select } from 'd3';

I tried your suggestion @slaweet but it makes no difference. I'm putting the config in craco.config.js because I'm using create-react-app:

  jest: {
    configure: {
      moduleNameMapper: {
        '@/(.*)$': '<rootDir>/src/$1',
      },
      transformIgnorePatterns: ['<rootDir>/node_modules/(?!d3)'],
    },
  },

[jboler]

Forgot to add that my project is written in Typescript including the Jest tests.

[jboler]

Fixed it. Just had to move the jest config into package.json:

  "jest": {
    "transformIgnorePatterns": [
      "<rootDir>/node_modules/(?!d3)/"
    ]
  },

[matiasfacio]

hi!

I still have this problem, but this time use ant design and running jest.
Do you know how to solve it??

` Details:

/Users/work-dashboard/node_modules/@antv/g-base/node_modules/d3-interpolate/src/index.js:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,jest){export { default as interpolate } from "./value.js";
                                                                                  ^^^^^^

SyntaxError: Unexpected token 'export'`

Thanks for any hint!

By the way, the other solutions did not help me.

[juztinlazaro]

same here @matiasfacio do you have any fix?

[matiasfacio]

same here @matiasfacio do you have any fix?

I kind of found a workaround for my case. I am using ant-design which uses 3d. I mocked the imports of the components using the library in the test file that was throwing the error... shame on me, but couldn't do it otherwise.

jest.mock('@ant-design/plots', () => ({
Column: () => null,
ColumnConfig: () => null,
}));

[juztinlazaro]

any solution? still problematic

[mswezey23]

I ran into this as well.

Project initially was: CRA, TS, Nivo, Chakra, Jest
Then went from CRA -> Craco.

Then, WIP, Craco -> Vite.

Here's what solve it for me:

  transformIgnorePatterns: ['/node_modules/(?!d3-(interpolate|color|scale|array|format|time)|internmap)'],

[ren1suyama]

I also got error like this

/Users/*****/Develop/*****/expo/node_modules/internmap/src/index.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,jest){export class InternMap extends Map {
                                                                                      ^^^^^^

    SyntaxError: Unexpected token 'export'

      3 | import { View } from 'react-native';
      4 | import Svg from 'react-native-svg';
    > 5 | import { scaleLinear } from 'd3-scale';
        | ^
      6 |
      7 | import { useDesignConstants } from '../../../hooks/useDesignConstants';
      8 | import {

and solved this by adding internmap to the jest.config.json like this

  "transformIgnorePatterns": [
    "/node_modules/(?!(jest-)?@?react-native|react-clone-referenced-element|@react-native-community|@react-native-picker|expo(nent)?|@expo(nent)?/.*|react-navigation|@react-navigation/.*|@unimodules/.*|unimodules|sentry-expo|native-base|react-native-svg|@ptomasroos/react-native-multi-slider|app-client-lib|uuid|firebase|@firebase|d3-scale|d3-array|internmap|d3-interpolate|d3-color)"
  ],

and it was solved!

Actually, I got error towards these 5 modules, so I added them all to the transformIgnorePatterns.

• d3-scale
• d3-array
• internmap
• d3-interpolate
• d3-color

I got this error when I upgraded

-    "d3-scale": "3.2.3",
+    "d3-scale": "4.0.2",

-    "jest": "26.6.3",
+    "jest": "29.2.1",

-    "typescript": "4.9.5",
+    "typescript": "5.1.3",

and lots more!