Can't use TypeScript modules that import ES6 modules from node_modules

🐛 Bug Report

I am trying to use some ES6 code from a module source folder in node_modules, however that code never gets transpiled to ES5 so a token error is produced.

To Reproduce

I have spent quite a long time doing various combinations of things, including using each of the presets, setting transform directly using babel to handle JS code. Here’s my current jest config:

"jest": {
        "testPathIgnorePatterns": [
            "<rootDir>/src/test/mocks/"
        ],
        "coveragePathIgnorePatterns": [
            "<rootDir>/src/test/mocks/"
        ],
        "moduleFileExtensions": [
            "js",
            "json",
            "ts"
        ],
        "testMatch": [
            "<rootDir>/src/app/**/*.spec.ts"
        ],
        "transformIgnorePatterns": [
            "node_modules/(?!(mapbox-gl)/)"
        ],
        "preset": "ts-jest/presets/js-with-ts",
        "coverageDirectory": "../coverage",
        "coverageThreshold": {
            "global": {
                "statements": 55,
                "branches": 25,
                "functions": 60,
                "lines": 55
            }
        },
        "moduleNameMapper": {
            "\\.(png|otf|svg|css)$": "<rootDir>/src/test/mocks/mock-image.ts"
        }
    },

Note the transformIgnorePatterns is ignores the core mapbox-gl module which is different to the module that isn’t compiling (@mapbox/mapbox-gl-draw).

Here’s the log:

  ● 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/james/Code/project/ui/node_modules/@mapbox/mapbox-gl-draw/src/constants.js:1
    export const classes = {
    ^^^^^^

    SyntaxError: Unexpected token 'export'

    > 1 | import * as Constants from '@mapbox/mapbox-gl-draw/src/constants';
        | ^
      2 | import * as CommonSelectors from '@mapbox/mapbox-gl-draw/src/lib/common_selectors';
      3 | import moveFeatures from '@mapbox/mapbox-gl-draw/src/lib/move_features';
      4 | import doubleClickZoom from '@mapbox/mapbox-gl-draw/src/lib/double_click_zoom';

      at Runtime._execModule (node_modules/jest-runtime/build/index.js:1179:56)
      at Object.<anonymous> (src/app/map/editing/internal/mapbox-draw-internals.ts:1:1)
      at Object.<anonymous> (src/app/map/editing/route.ts:16:1)
      at Object.<anonymous> (src/app/map/editing/direct-select.ts:22:1)
      at Object.<anonymous> (src/app/map/map-controller.ts:5:1)
      at Object.<anonymous> (src/app/map/editing/unit.ts:12:1)
      at Object.<anonymous> (src/app/map/editing/unit.spec.ts:1:1)

Expected behavior

ts-jest transforms the ES6 code from the node_modules files to ES5 and the tests run without getting Unexpected token error.

Link to repo (highly encouraged)

Debug log:

# content of ts-jest.log :

envinfo

System:
    OS: Kubuntu

Npm packages:
    jest: 26.4.2
    ts-jest: 25.5.1
    typescript: 3.8.1
    babel(optional): 

[JamesLMilner]

Yes, looks like this was the problem, alongside some changes I had to my mocks (Mapbox moved to ES6 modules for these packages which meant I had to mock things slightly differently.

In the end package.json wise all that was needed was:

        "transformIgnorePatterns": [
            "node_modules/(?!(mapboxgl|@mapbox/mapbox-gl-draw)/)"
        ],
        "preset": "ts-jest/presets/js-with-ts",

Thanks! 👍

[FGoessler]

In addition to what @Raaghu wrote really make sure to use a babel.config.js and not .babelrc file!

.babelrc won’t be used on node_modules and you might wonder why stuff doesn’t get transformed…

Source: https://github.com/facebook/jest/issues/6053#issuecomment-383632515