Nextjs & Jest transform/transformIgnorePatterns 不与 esm 模块一起使用

Question

我对此做了大量的研究，并找到了相当多的解决方案。我已经找到了一种变通方法，希望transform和transformIgnorePatterns能够正常工作。然而，我唯一能做的事情似乎就是在__mocks__文件夹中手动添加一些模拟模块。

不确定这是否是由于将Nextjs与Jest一起使用？

这是我的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);

我读到我也需要一个babel.config.js。这是文件：

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

Answer 1

这里有一个解决方案，以防有人遇到同样的问题，但正在使用NextJs 12.2、next/jest和Jest 28。

Jest为ECMAScript模块(ESM(提供了一些实验支持；node_modules"；还没有被下一个笑话吓倒。

因此，我们需要使用transformIgnorePatterns来防止ESM文件被转换。

更改transformIgnorePatterns的默认配置被next/jest覆盖，请参阅下面的解决方案。

// 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)/)',
]
})

我为一个使用swiper/react的案例创建了一个存储库，作为必要设置的完整参考。https://github.com/markcnunes/with-jest-and-esm

请记住，对于未来的Next.js/next/js版本，此设置可能必须更改，但只要共享此方法，以防对使用此设置的其他人有用。

我还用这个答案回答了另一个问题，以防您正在寻找与swiper/react相关的解决方案。

Answer 2

我在这里报告的jest和react-dnd中遇到了这个问题。

我使用了与上面@Mark Nunes相同的解决方案，但稍微整理了一下：

// 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
}