Jest transformIgnorePatterns not working

Question

I have spent a long time looking at other questions about this and looking at other projects on Github but none of the answers seem to work for me.

I am loading a third party library in my project, and when running Jest tests I get the error

export default portalCommunication;
^^^^^^

SyntaxError: Unexpected token export

> 1 | import portalCommunication from 'mathletics-portal-communication-service';

I have tried updating my Jest config in many ways to get it to transpile this library but I always get the same error.

This is my current jest.config.js file:

module.exports = {
    moduleNameMapper: {
        '\\.(css|scss)$': 'identity-obj-proxy',
        '\\.svg$': '<rootDir>/test/mocks/svg-mock.js'
    },
    setupFiles: ['./test/test-setup.js'],
    transformIgnorePatterns: [
        '<rootDir>/node_modules/(?!mathletics-portal-communication-service)'
    ]
};

I have also tried adding the transform property to run babel-jest against this mathletics-portal-communication-service directory.

Please help!

Kingsley

you probably need to configure babel. – Mcmullan

My project has babel set up and working fine, is there something special I would need to do for Jest? I thought it used babel-jest automatically? – Kingsley

See related question – Booted

Answer 1

The transformIgnorePatterns didn't work for me until I changed my .babelrc to babel.config.js, like this:

module.exports = {
    "presets": [
        "@babel/preset-env"
    ]
};

as seen on this comment: https://github.com/facebook/jest/issues/6229#issuecomment-403539460

Krusche

Do you know if a .babelrc or babel.config.js file is absolutely necessary? I'm trying to get mine working with just a transformIgnorePatterns declaration in my package.json – Arum

Looking at the linked github issue, it seems like it won't work in the package.json either, but I haven't tried it. – Krusche

This response is underrated!! I had been bumping my head for several hours until I saw this! Heck this should be in the docs! – Antin

Weird that .babelrc doesn't work while babel.config,js does. – Obelisk

thank you, you save my time! – Klehm

is there an issue with making the filename change? I mean, will this fix tests but potentially break something else? – Neil

It took my the whole day to fix this error, installing this babel package and adding the babel.config.js solved it for me – Aquatic

@Arum I had OP's issue with the declaration in package.json, but moving to babel.config.js resolved it for me. Guess Jest doesn't respect package.json babel declarations. – Autogiro

Answer 2

Another team at my org added some common module. This was not transpiled and so the issue.

I followed this: https://babeljs.io/docs/en/configuration#whats-your-use-case

1. Converted my .babelrc to babel.config.json
2. in jest config added this: transformIgnorePatterns: ['/node_modules/(?!(@companyName)/).*/'],

This solved my problem.

Totally

I saw someone say to add this to package.json.. uhh. Thank you so much! – Booted

Thank you for this! It's a subtle line in the babel documentation, but (apparently) Babel will not compile your node_modules unless you have a babel.config.json file present. Super unexpected behavior, in my opinion, but at least I got it working – Grasp

Answer 3

As a workaround for now I have changed my config to use the moduleNameMapper option to load a mock class for that library instead. I would have preferred to use transformIgnorePatterns instead so would still appreciate any ideas.

New config:

module.exports = {
    moduleNameMapper: {
        '\\.(css|scss)$': 'identity-obj-proxy',
        '\\.svg$': '<rootDir>/test/mocks/svg-mock.js',
        'mathletics-portal-communication-service': '<rootDir>/test/mocks/mathletics-portal-communication-service-mock.js'
    },
    setupFiles: ['./test/test-setup.js']
};

Kingsley

This was the only thing that worked for my case as well – Consequent

Answer 4

Adding trailing slash fix this for me:

{
    // ...
    transformIgnorePatterns: [
        '<rootDir>/node_modules/(?!mathletics-portal-communication-service/)'
    ]
};

Knudson

Answer 5

It's worth noting if you're using Next.js that you might be affected by this issue. next/jest.js makes it hard to transpile modules in node_modules, but you can modify the baked config in jest.config.mjs like this:

import nextJest from 'next/jest.js'
const createJestConfig = nextJest({
    dir: './',
})

// add any custom config to be passed to Jest
/** @type {import('jest').Config} */
const config = {
  ...
  // setting `transformIgnorePatterns` in here does not work
}

// work around https://github.com/vercel/next.js/issues/35634
async function hackJestConfig() {
    // createJestConfig is exported this way to ensure that next/jest can load the Next.js config which is async
    const nextJestConfig = await createJestConfig(config)();
    // /node_modules/ is the first pattern, so overwrite it with the correct version
    nextJestConfig.transformIgnorePatterns[0] = '/node_modules/(?!(micromark-extension-gfm))/';
    return nextJestConfig;
}

export default hackJestConfig```

Vanda

Answer 6

It might be your use of rootDir. Try:

    "transformIgnorePatterns": [
      "node_modules/(?!(mathletics-portal-communication-service))"
    ]

Arum