Unfortunately, Jest does not offer support for ECMAScript Modules, which happens to be the dependency utilized by hast-util-raw. Additionally, the issue persisted with transformIgnorePatterns not functioning as expected. Here's the workaround I came up with while working on a Next.JS setup.

1. Removal of babel.rc

The removal of your babel.rc file is necessary. You can directly incorporate the following modifications instead.

2. Including moduleNameMapper

This step resolves another error related to the unavailability of parse5, which is demanded by hast-util-raw

/** @type {import('jest').Config} */
const customJestConfig = {
  //...
  moduleNameMapper: {
    'parse5/lib/parser/index.js':
      '<rootDir>/node_modules/hast-util-raw/node_modules/parse5/lib/parser/index.js',
  }
}

3. Integration of transformIgnorePatterns

Addition of transformIgnorePatterns, positioned right at the end, is required. Inserting it directly into the configuration did not yield the desired outcome for some reason. It was also essential to include each package relied upon by hast-util-raw. Surely, there must be a more efficient approach to tackle this challenge :)

module.exports = async () => ({
  ...(await createJestConfig(customJestConfig)()),
  transformIgnorePatterns: [
    'node_modules/(?!(rehype-raw|hast-util-raw|unist-util-position|unist-util-visit|unist-util-visit-parents|unist-util-is|hast-util-from-parse5|hastscript|property-information|hast-util-parse-selector|space-separated-tokens|comma-separated-tokens|vfile-location|web-namespaces|hast-util-to-parse5|zwitch|html-void-elements)/)'
  ]
})

In case you are curious about my complete configuration...

/* eslint-disable @typescript-eslint/no-var-requires */
// 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: './'
})

// Incorporate any personalized configurations to be passed to Jest
/** @type {import('jest').Config} */
const customJestConfig = {
  // Include additional setup options before every test execution
  setupFilesAfterEnv: ['<rootDir>/jest.setup.ts'],
  // If using TypeScript with a baseUrl set to the root directory, then the below aliases are crucial to function
  moduleDirectories: ['<rootDir>/node_modules', '<rootDir>/src', '<rootDir>/src/pages'],
  testEnvironment: 'jest-environment-jsdom',
  testPathIgnorePatterns: [
    '<rootDir>/.next/',
    '<rootDir>/node_modules/',
    '<rootDir>/coverage',
    '<rootDir>/dist'
  ],
  moduleNameMapper: {
    'react-markdown': '<rootDir>/node_modules/react-markdown/react-markdown.min.js',
    'parse5/lib/parser/index.js':
      '<rootDir>/node_modules/hast-util-raw/node_modules/parse5/lib/parser/index.js'
  },
  resolver: '<rootDir>/.jest/resolver.js',
  clearMocks: true,
  testTimeout: 20000
}

// The export of createJestConfig is structured as such to allow next/jest to fetch the Next.js config asynchronously
// module.exports = createJestConfig(customJestConfig)
module.exports = async () => ({
  ...(await createJestConfig(customJestConfig)()),
  transformIgnorePatterns: [
    'node_modules/(?!(rehype-raw|hast-util-raw|unist-util-position|unist-util-visit|unist-util-visit-parents|unist-util-is|hast-util-from-parse5|hastscript|property-information|hast-util-parse-selector|space-separated-tokens|comma-separated-tokens|vfile-location|web-namespaces|hast-util-to-parse5|zwitch|html-void-elements)/)'
  ]
})

To better grasp the concept, it's important to note that Next.js instructs Jest not to transform packages within the /node_modules directory unless specified in the config file (using the transpilePackages property).

Although managing proper exclusions for transformations can be tricky, a helpful discussion on this link pointed me in the right direction.

If you prefer not to manually maintain the array, as it is dependent on transpilePackages in Next.js, you can adapt their approach outlined in this source code snippet. This method allows for the transformation of both packages listed in transpilePackages and those necessary for Jest functionality.

You can view the differences between my workaround and the original setup in this commit: here

I have opted against sharing direct code in this post to avoid confusion.

I found the solution that worked best for me was using @rottitime. One thing I observed is that moving transformIgnorePatterns to the config object outside of the async function at the bottom does not yield the desired outcome. Here's an example of what won't work:

import nextJest from 'next/jest.js'
 
const createJestConfig = nextJest({
  dir: './',
})
 
// Add any custom config to be passed to Jest
/** @type {import('jest').Config} */
const customJestConfig = {
  // Add more setup options before each test is run
  setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
  testEnvironment: 'jest-environment-jsdom',
  preset: 'ts-jest',
  testPathIgnorePatterns: [
    '<rootDir>/.next/',
    '<rootDir>/node_modules/',
    '<rootDir>/coverage',
    '<rootDir>/dist'
  ],
  transformIgnorePatterns: [
    'node_modules/(?!(mui-tel-input)/)'
  ]
}

const exportConfig = async () => ({
  ...(await createJestConfig(customJestConfig)())
});


export default exportConfig;