使用 import.meta.env 测试 svelte 组件

Question

我现在正在努力几天才能让我的测试设置运行。大致轮廓：Vite、Svelte（带 ts）、Jest。

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

SyntaxError：无法在模块外部使用“import.meta”

我尝试过不同的变压器、babel 插件和配置，但从未成功......

我的笑话配置：

"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 进行 svelte 组件测试时遇到了问题。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;