使用 import.meta.env 测试苗条的组件

Question

我现在正在努力运行我的测试设置几天。粗略的轮廓：Vite、Svelte（带 ts）、Jest。

我将 import.meta.env.SOMENAME 用于我的环境变量，尽管一旦组件使用 import.meta.env 测试将失败，这对于开发来说效果很好：

语法错误：不能在模块外使用“import.meta”

我尝试了不同的转换器、babel-plugins 和配置，但从未成功...

我的笑话配置：

"jest": {
    "globals": {
      "ts-jest": {
        "isolatedModules": true
      }
    },
    "verbose": true,
    "transform": {
      "^.+\\.svelte$": [
        "svelte-jester",
        {
          "preprocess": true
        }
      ],
      "^.+\\.ts$": "ts-jest",
      "^.+\\.js$": "babel-jest"
    },
    "setupFilesAfterEnv": ["<rootDir>/setupTests.ts"],
    "moduleFileExtensions": ["js", "ts", "svelte"]
  }

babel.config.js

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

svelte.config.cjs

const sveltePreprocess = require('svelte-preprocess')

module.exports = {
  emitCss: true,
  preprocess: sveltePreprocess()
};

除此之外，我尝试使用@babel/plugin-syntax-import-meta，但最终遇到了同样的错误。 vite-jest 看起来很有希望，但我还是没能成功。

我很感激我能得到的每一个提示。如果我可以提供任何其他信息，请告诉我。此外，我对 vite 和 babel 的了解非常有限，因此非常感谢 IU 在这个主题上获得的任何帮助。

更新（解决方案）

所以如果你使用 babel，你可以使用babel-preset-vite。 Apu 使用esbuild-jest 的方法也是很多人使用的很好的解决方案。不幸的是，这些东西对我不起作用，所以我决定使用 vite 的define 解决方法。

此解决方法包括两个步骤。

1. 将import.meta.env 替换为process.env（如果这对您来说是一个交易破坏者，那么我希望您对上述解决方案有好运）您只需将要测试的文件中的实例替换为 jest。
2. 使用定义更新 Vite 配置。此步骤是必要的，否则您的构建将中断（开发仍然可以工作）

vite.config.js

const dotEnvConfig = dotenv.config();

export default defineConfig({
  define: {
    "process.env.NODE_ENV": `"${process.env.NODE_ENV}"`,
    "process.env.VITE_APP_SOMENAME": `"${process.env.VITE_APP_SOMENAME}"`
  },
  ...
)};

我知道这只是一种解决方法，但也许这对某人有所帮助。谢谢，祝你好运。

Answer 1

我在使用 jest 进行纤细组件测试时遇到了问题。 babel 不擅长解析import.meta。我使用esbuild-jest 来转换 ts 和 js 文件。它解决了import.meta 的问题。这是我的 jest.config.cjs。

npm i esbuild esbuild-jest -D

const { pathsToModuleNameMapper } = require('ts-jest/utils');
const { compilerOptions } = require('./tsconfig');

const config = {
  "transform": {
    "^.+\\.svelte$": [
      "svelte-jester",
      {
        "preprocess": true
      }
    ],
    "^.+\\.(ts|tsx|js|jsx)$":  ["esbuild-jest"]
  },
  "moduleFileExtensions": [
    "js",
    "ts",
    "tsx",
    "svelte"
  ],
  "setupFilesAfterEnv": [
    "@testing-library/jest-dom/extend-expect"
  ],
  "collectCoverageFrom": [
    "**/*.(t|j)s",
    "**/*.svelte"
  ],
  coverageProvider: 'v8',
  "coverageDirectory": "./coverage",
  "coveragePathIgnorePatterns": [
    "/node_modules/",
    "/.svelte-kit/"
  ],
  "moduleNameMapper": pathsToModuleNameMapper(compilerOptions.paths, {prefix: '<rootDir>/'})
};
  
  
module.exports = config;