使用Jest测试React应用，使用Vite作为模块捆绑器;导入.元的错误

Question

我正在用Jest测试一个React-Typescript应用程序;我的应用程序使用Vite作为模块绑定器。问题是，每次我运行测试和jest遇到import.meta。在ENV_VAR_NAME语句中，我得到以下错误:"SyntaxError: Cannot use 'import。

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

在转换键的笑话。我尝试使用@swc/jest和esbuild-jest，但没有修复导入。元问题;这个问题有解决办法吗?我可以不使用巴别塔实现它吗?

提前感谢您的时间

Answer 1

• https://codingwithmanny.medium.com/quick-jest-setup-with-vitejs-react-typescript-82f325e4323f
参考上面的链接在你的Vite项目中设置Jest。
• 安装这个插件(https://www.npmjs.com/package/vite-plugin-environment)
• 在项目根目录package.json附近创建.env文件
• 在.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