Next/Jest : Cannot override transformIgnorePatterns

[crubier]

Verify canary release

• I verified that the issue exists in Next.js canary release

Provide environment information

Relevant in any environment

What browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

Describe the Bug

The way next/jest is implemented, (See here), there is no way to force jest to transpile modules inside node_modules.

When trying to import node_modules who need to be transpiled (e.g the openlayers module ol), jest throws the following error:

Jest encountered an unexpected token

    Jest failed to parse a file. This happens e.g. when your code or its dependencies use non-standard JavaScript syntax, or when Jest is not configured to support such syntax.

    Out of the box Jest supports Babel, which will be used to transform your files into valid JS based on your Babel configuration.

    By default "node_modules" folder is ignored by transformers.

    Here's what you can do:
     • If you are trying to use ECMAScript Modules, see https://jestjs.io/docs/ecmascript-modules for how to enable it.
     • If you are trying to use TypeScript, see https://jestjs.io/docs/getting-started#using-typescript
     • 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/configuration
    For information about custom transformations, see:
    https://jestjs.io/docs/code-transformation

The recommended way to fix this error is to add a transformIgnorePatterns regex, so that the jest.config.js looks like this:

// jest.config.js
const nextJest = require('next/jest')

const createJestConfig = nextJest({
  dir: '.',
})

const customJestConfig = {
  testEnvironment: 'jest-environment-jsdom',
  // ******* THIS BIT IS IMPORTANT *******
  transformIgnorePatterns: [
    '.*/node_modules/(?!(ol)/)'
  ]
}

module.exports = createJestConfig(customJestConfig)

BUT this does not work due to the way next/jest is implemented, (See here), the node_module element is impossible to remove from that array, and hence no node_module can be transpiled, ever, even if I override this in my own jest.config.js .

Expected Behavior

Setting this in my own jest.config.js

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

Would transpile ol, and I wouldn't have this error when I run tests:

    Jest encountered an unexpected token

    Jest failed to parse a file. This happens e.g. when your code or its dependencies use non-standard JavaScript syntax, or when Jest is not configured to support such syntax.

    Out of the box Jest supports Babel, which will be used to transform your files into valid JS based on your Babel configuration.

    By default "node_modules" folder is ignored by transformers.

    Here's what you can do:
     • If you are trying to use ECMAScript Modules, see https://jestjs.io/docs/ecmascript-modules for how to enable it.
     • If you are trying to use TypeScript, see https://jestjs.io/docs/getting-started#using-typescript
     • 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/configuration
    For information about custom transformations, see:
    https://jestjs.io/docs/code-transformation

To Reproduce

1. Clone the official next jest example: https://github.com/vercel/next.js/tree/canary/examples/with-jest
2. npm install ol
3. Put this the jest.config.js:

// jest.config.js
const nextJest = require('next/jest')
const createJestConfig = nextJest({your test environment
  dir: '.',
})
const customJestConfig = {
  testEnvironment: 'jest-environment-jsdom',
  transformIgnorePatterns: [
    '.*/node_modules/(?!(ol)/)'
  ]
}
module.exports = createJestConfig(customJestConfig)

4. Create a test: my.test.ts:

// my.test.ts
import { Map } from "ol";
describe("Testing", () => {
  it("can run ol tests", () => {
    const map = new Map({});
    expect(map.getAllLayers().length).toBe(0);
  });
});

5. See the error.

[xveganxxxedgex]

I'm running into this issue as well for moduleNameMapper - I need to map .svg files to be stubbed as react components, but the existing image stub rule in the next/jest config is getting used instead since it's higher on the list:

next.js/packages/next/build/jest/jest.ts

Line 74 in acbd543

moduleNameMapper: {

I'm working around it for now by overriding my settings in the jest config:

const jestConfig = async () => {
  const nextJestConfig = await createJestConfig(customJestConfig)();
  return {
    ...nextJestConfig,
    moduleNameMapper: {
      // Workaround to put our SVG stub first
      "\\.svg": "<rootDir>/../../tools/jest/svg-stub.js",
      ...nextJestConfig.moduleNameMapper,
    },
  };
};

module.exports = jestConfig;

[pzi]

Looks like @kevva was on the money here: #34350 (comment)

[kevva]

For your info, I worked around it by mocking them manually in the test files instead:

jest.mock('path/to/image.svg', () => 'svg');

However, it'd be nice if we could override/extend the default values in moduleNameMapper.

[pzi]

Yeah, thanks to this comment #26749 (comment), I got to the same workaround for now. Thanks @kevva

[pzi]

@kevva, did you end up creating an issue for the moduleNameMapper order?

[kevva]

No, unfortunately not. I don't have time for writing a good issue with a good reproduction case atm. Feel free to go ahead and do it :).

[vincent-lecrubier-skydio]

(Just to be clear, in my case I can't mock the module as a workaround, I do want to use it in my test)

[timneutkens]

I've moved the moduleNameMapper so that you can override the mapping. The case where you want to do anything else than is provided by default is explained well by @xveganxxxedgex's comment: #35634 (comment). That approach allows you to override any setting you'd want to tweak based on customizations you've done to the webpack config, those are not covered / supported by Next.js and as such are not specifically added as features to next/jest.

[timmywil]

The PR that closed this issue did not address OP's original use case, which was not related to moduleNameMapper. The PR addressed a separate issue presented in the first comment.

The problem specifically has to do with jest 28 adding support for the exports field and jsdom's default environment being the browser. When the test environment is set to jsdom, any node module that exports esm will cause this error, which will only get more common as more packages add support for exports.

It's not really a jest error, so I think the best way to address it is to allow for specific node modules to be transformed in the jest config, which means overriding transformIgnorePatterns somehow and not just extending it. Yes, there are workarounds, but they are only bandaids. It'd be amazing if this could be detected automatically based on jest environment and which packages have exports support, but I'm not expecting that.

Minimal reproduction: https://codesandbox.io/s/magical-chihiro-xf68kl Open a new terminal window and run npm test.

Known workaround

async function jestConfig() {
  const nextJestConfig = await createJestConfig(customJestConfig)()
  // /node_modules/ is the first pattern
  nextJestConfig.transformIgnorePatterns[0] = '/node_modules/(?!uuid)/'
  return nextJestConfig
}

module.exports = jestConfig

Edit: Thinking about this more. I understand it's a breaking change to allow overrides to transformIgnorePatterns, but maybe next could add support for passing a function? next would resolve the function before passing the array of strings to jest.

const customJestConfig = {
  // ... other config
  transformIgnorePatterns: (nextDefaultPatterns) => {
    return [
      ...nextDefaultPatterns,
      // Extend or override
    ]
  }
}

[Talendar]

I'm still experiencing this issue in Next v12.1.6 with Jest v28.0.3. I'm currently using the solution proposed by @timmywil as a workaround.

[github-actions]

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.