Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

I've done a good amount of research on this and have found a decent amount of solutions. I have found what feels like a workaround and would like to get the transform and transformIgnorePatterns working. It seems the only thing I can get working however is to manually add some mock modules inside of my __mocks__ folder.

Not sure if this is due to using Nextjs with Jest or not?

Here is my jest.config.js

const nextJest = require("next/jest");
const esModules = ["react-markdown", "rehype-raw", "remark-gfm"].join("|");
const createJestConfig = nextJest({
  // Provide the path to your Next.js app to load next.config.js and .env files in your test environment
  dir: "./",
// Add any custom config to be passed to Jest
const customJestConfig = {
  setupFilesAfterEnv: ["<rootDir>/jest.setup.js"],
  moduleNameMapper: {
    // Handle module aliases (this will be automatically configured for you soon)
    "^@/components/(.*)$": "<rootDir>/components/$1",
    "^@/pages/(.*)$": "<rootDir>/pages/$1",
  testEnvironment: "jest-environment-jsdom",
  transform: {
    [`(${esModules}).+\\.js$`]: "babel-jest",
  transformIgnorePatterns: [
    `[/\\\\]node_modules[/\\\\](?!${esModules}).+\\.(js|jsx|mjs|cjs|ts|tsx)$`,
// createJestConfig is exported this way to ensure that next/jest can load the Next.js config which is async
module.exports = createJestConfig(customJestConfig);
I have read that I will need a babel.config.js as well. Here is that file:
module.exports = {
  presets: ["next/babel", "@babel/preset-env"],
Here is a solution in case someone runs into this same issue but is using NextJs 12.2, next/jest and Jest 28.
Jest provides some experimental support for ECMAScript Modules (ESM) but "node_modules" are not transpiled by next/jest yet.
So we need to use transformIgnorePatterns to prevent the ESM files from being transformed.
The default configuration for changing transformIgnorePatterns is overwritten by next/jest see below the solution for this.
// jest.config.js
const nextJest = require('next/jest')
const createJestConfig = nextJest({
  // Path to Next.js app to load next.config.js
  dir: './'
/** @type {import('@jest/types').Config.InitialOptions} */
const customJestConfig = {
   * Custom config goes here, I am not adding it to keep this example simple.
   * See next/jest examples for more information.
module.exports = async () => ({
  ...(await createJestConfig(customJestConfig)()),
  transformIgnorePatterns: [
    // The regex below is just a guess, you might tweak it
    'node_modules/(?!(react-markdown|rehype-raw|remark-gfm)/)',
I created a repository for a full reference of the necessary setup for a case that was using swiper/react.
https://github.com/markcnunes/with-jest-and-esm
Have in mind this setup might have to change for future Next.js / next/js versions but just sharing this approach in case this is useful for other people using this same setup.
I also used this answer to another question in case you are looking for solutions related to swiper/react.
                Thanks very much! This worked for me with Jest v29 as long as I did also not set the --experimental-vm-modules flag when executing jest
– wolfyuk
                Oct 3, 2022 at 9:23
                I am sorry Luis, I am not able to help you because I don't use @firebase/auth, you might want to create a new question for this.
– Mark Nunes
                Nov 4, 2022 at 15:51
I had this problem specifically with jest and react-dnd as reported here.
I used the same solution as @Mark Nunes above, but tidied up a bit:
// jest.config.js
const nextJest = require('next/jest')
const createJestConfig = nextJest({
  // Provide the path to your Next.js app to load next.config.js and .env files in your test environment
  dir: './',
const customJestConfig = {
  // You can add other jest config overrides here
  testPathIgnorePatterns: ['/node_modules/'],
  // DON'T SET THIS HERE - it's overridden below
  transformIgnorePatterns: [],
module.exports = async function() {
  const makeConfig = await createJestConfig(customJestConfig)
  const finalJestConfig = await makeConfig()
  // This replaces the default of '/node_modules/'
  finalJestConfig.transformIgnorePatterns[0] =
    '/node_modules/(?!@react-dnd|react-dnd|dnd-core|react-dnd-html5-backend/)'
  return finalJestConfig
        
Thanks for contributing an answer to Stack Overflow!
Please be sure to answer the question. Provide details and share your research!
But avoid …
Asking for help, clarification, or responding to other answers.
Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.