时间戳

首页 > 解决方案 > 使用 import.meta.env 测试苗条的组件

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

问题描述

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

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

SyntaxError：不能在模块外使用“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"
        }
      }
    ]
  ]
};

苗条的.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。from Apu的方法esbuild-jest也是很多人使用的很好的解决方案。不幸的是，这些东西对我不起作用，所以我决定使用 vite 的define解决方法。

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

  1. 替换import.meta.env为process.env（如果这对你来说是一个交易破坏者，那么我希望你对上面的解决方案有好运）你只需要用玩笑替换你想要测试的文件中的实例。
  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}"`
  },
  ...
)};

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

标签： jestjsbabeljssveltevite

解决方案

我在使用 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;

推荐阅读