使用 Jest 测试 React 应用程序，使用 Vite 作为模块 Bundler；导入元错误

Question

我正在使用 Jest 测试 React-Typescript 应用程序；我的应用程序使用 Vite 作为模块捆绑器。问题是，每次我运行测试并且玩笑遇到 import.meta.ENV_VAR_NAME 语句时，我都会收到以下错误：“SyntaxError：无法在模块外部使用'import.meta'”

这是我的 jest.config.js 文件：

module.exports = {
roots: ["<rootDir>/src"],
setupFilesAfterEnv: ["<rootDir>/jest/jest.setup.js"],
collectCoverageFrom: ["src//*.{js,jsx,ts,tsx}", "!src//.d.ts"],
testMatch: [
    "<rootDir>/src//tests//.{js,jsx,ts,tsx}",
    "<rootDir>/src/*/.{spec,test}.{js,jsx,ts,tsx}"
],
testEnvironment: "jsdom",
transform: {
    // "^.+\.(js|jsx|mjs|cjs|ts|tsx)$": "esbuild-jest",
    "^.+\.(js|jsx|mjs|cjs|ts|tsx)$": "@swc/jest",
    "^.+\.scss$": "jest-scss-transform",
    "^.+\.css$": "<rootDir>/jest/mocks/cssMock.js"
},
transformIgnorePatterns: [
    "[/\\]node_modules[/\\].+\.(js|jsx|mjs|cjs|ts|tsx)$",
    "^.+\.module\.(css|sass|scss)$"
],
watchPlugins: [
    "jest-watch-typeahead/filename",
    "jest-watch-typeahead/testname"
],
resetMocks: true,
moduleDirectories: ["node_modules", "src"],
moduleNameMapper: {
    "\.worker": "<rootDir>/src/seo/mocks/workerMock.ts",
    "\.(css|sass|scss)$": "identity-obj-proxy"
}
};

在 jest.config 的转换键中，我尝试使用 @swc/jest 和 esbuild-jest，但没有解决 import.meta 问题；这个问题有解决办法吗？我可以在不使用 Babel 的情况下实现它吗？

在此先感谢您的时间

Answer 1

• https://codingwithmanny.medium.com/quick-jest-setup-with-vitejs-react-typescript-82f325e4323f
• 请参考上面的链接在您的 Vite 项目中设置 Jest。
• 安装此插件（https://www.npmjs.com/package/vite-plugin-environment）
• .env在项目根文件夹中靠近 package.json 的位置创建文件
• .env在文件中提供您的环境变量
• 改变你的import.meta.env.YOUR_VAR一切process.env.YOUR_VAR
• 打开vite.config.ts并导入import EnvironmentPlugin from 'vite-plugin-environment';
• 添加EnvironmentPlugin('all')插件。例子：plugins: [react(), EnvironmentPlugin('all')]
• 现在您的测试将顺利通过import.meta.env。
• 这个配置背后的解释是 Jest 会理解process.env.YOUR_VAR，所以如果你改变所有的import.meta.env.YOUR_VAR，process.env.YOUR_VAR那么 Jest 不会给出错误。
• 但接下来我们必须提供vite-plugin-environment给 Vite Config 以便它理解process.env.YOUR_VAR
• 它也适用于生产。