Babel.js 使用import. meta.env测试精简组件

9gm1akwq  于 2022-12-08  发布在  Babel
关注(0)|答案(2)|浏览(327)

我现在正在努力几天来让我的测试设置运行。(笑)(笑)
我使用 meta作为我的环境变量,尽管这对于开发来说很有效,但是只要组件使用import.meta.env,测试就会失败,并显示:
语法错误:无法在模块外部使用'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看起来很有前途,但我还是不能让它工作。
我感谢每一个提示,我可以得到。如果我可以提供任何额外的信息,请让我知道。而且我的知识维特和Babel是非常有限的,所以真的很感谢任何帮助IU可以得到这个主题。

更新(解决方案)

所以如果你使用babel,你可以使用babel-preset-vite。来自Apu的esbuild-jest方法也是很多人使用的很好的解决方案。不幸的是,这些东西对我不起作用,所以我决定使用vite的define。
此解决方法包括两个步骤。
1.将import.meta.env替换为process.env(如果这对您来说是一个交易破坏者,那么我希望您能幸运地使用上面的解决方案)您只需要将您要测试的文件中的示例替换为jest。
1.使用define更新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}"`
  },
  ...
)};

我知道这只是一个变通办法,但也许这对某人有帮助。谢谢&祝你好运。

cl25kdpy

cl25kdpy1#

一个最近的替代Jest的理解import.meta.env的是Vitest
它应该几乎不需要额外的配置就可以开始,而且它与Jest高度兼容,所以它只需要对实际测试进行很少的更改。
在此用例中,Vitest相对于Jest的优势在于:

  • 它是专为Vite设计的,可以按需处理测试
  • 它将重用您现有的Vite配置:
  • 任何define变量都将按预期被替换
  • Vite添加到import.meta的扩展将照常可用
mm9b1k5b

mm9b1k5b2#

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

相关问题