Vue3+Vite+Quasar模板中Jest测试报错问题求助

开发者阿泽

2026-6-25

解决方案：Jest测试中import.meta语法错误处理

问题原因

Jest默认不支持ES模块的import.meta语法，而Vite项目中通过import.meta.env获取环境变量的代码，在Jest运行时无法被识别，从而抛出SyntaxError: Cannot use 'import.meta' outside a module错误。

可行方案

方案1：全局模拟`import.meta.env`

在Jest的setup文件（如jest.setup.js）中添加全局模拟，直接替换import.meta对象：

global.import.meta = {
  env: {
    // 复制你项目中用到的VITE_*环境变量，测试用值可自定义
    VITE_APP_SECRET_KEY: 'test-secret',
    VITE_APP_API_URL: 'http://test-api.com'
  }
};

在jest.config.json中指定这个setup文件：

{
  "setupFilesAfterEnv": ["./jest.setup.js"]
}

方案2：用Babel插件转换`import.meta`

安装转换插件：

npm install --save-dev babel-plugin-transform-vite-meta-env

修改babel.config.json，在test环境中启用插件：

{
  "env": {
    "test": {
      "plugins": [
        ["transform-vite-meta-env", {
          "envName": "test",
          "replace": true
        }]
      ]
    }
  }
}

确保jest.config.json中配置了babel-jest作为JavaScript文件的转换器：

{
  "transform": {
    "^.+\\.js$": "babel-jest",
    "^.+\\.vue$": "@vue/vue3-jest"
  }
}

方案3：针对Quasar项目的专属配置

如果使用Quasar CLI，可借助@quasar/testing包的能力，在测试配置中注入环境变量：

在jest.setup.js中通过Vue Test Utils全局注入mock：

import { config } from '@vue/test-utils';

config.global.mocks['import.meta.env'] = {
  VITE_APP_SECRET_KEY: 'test-key'
};

确保quasar.conf.js中测试配置已正确引入setup文件：

module.exports = function (ctx) {
  return {
    // ...其他配置
    testing: {
      jest: {
        setupFilesAfterEnv: ['./jest.setup.js']
      }
    }
  };
};