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

Question

我现在挣扎了几天才能开始我的测试。大致轮廓: Vite，Svelte (有ts)，Jest。

我将import.meta.env.SOMENAME用于我的环境vars，尽管这对于开发很好，只要组件使用了import.meta.env，测试就会失败：

SyntaxError:不能在模块外使用“import.meta”

我试过不同的变压器，巴贝尔插件和吐露，但都没成功.

我的jest配置：

"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在这个话题上所能得到的任何帮助。

更新(解决方案)

所以，如果你使用巴贝尔，你可以使用巴别-维特。来自Apu的esbuild-jest方法也是许多人使用的很好的解决方案。不幸的是，这些东西对我没有用，所以我决定用vite的定义来解决这个问题。

此解决方案由两个步骤组成。

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

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

了解import.meta.env的Jest的另一种更新的选择是维斯特。

它应该几乎不需要额外的配置才能启动，而且它与Jest高度兼容，因此几乎不需要对实际测试进行更改。

与Jest相比，Vitest在此用例中的优点是：

• 它是专门为Vite设计的，并将按需处理测试。
• 它将重用您现有的Vite配置：
  • 任何define变量都将按预期替换。
  • Vite添加到import.meta中的扩展将一如既往地可用。

Answer 2

我在svelte组件测试以及使用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;