Snowpack项目配置Jest+React Testing Library出现import.meta模块选项错误求助

错误原因 #

Jest默认将代码转换为CommonJS格式执行，而CommonJS规范中不存在import.meta元属性，即使你在tsconfig.json中配置了module: esnext，ts-jest在Jest运行环境下的默认模块规则仍为CommonJS，因此触发报错。同时你当前的Jest配置未对src目录下的ts/tsx文件指定转换器，也会引发兼容问题。

解决方案1：全局Mock import.meta（推荐，无需额外依赖） #

测试场景下不需要真实调用Snowpack的运行时环境变量，直接Mock即可快速解决问题：

1. 项目根目录新建jest.setup.js文件，添加如下内容：

// jest.setup.js
const mockImportMeta = {
  env: {
    SNOWPACK_PUBLIC_BASE_URL: 'http://localhost:8080',
    // 其余你用到的SNOWPACK_PUBLIC_开头的环境变量可在此处补充
  }
}
Object.defineProperty(global, 'import.meta', {
  value: mockImportMeta
})

2. 修改package.json中的Jest配置，新增setupFiles字段引入Mock文件，同时补充src文件转换规则、更换适配React测试的运行环境：

{
  "jest": {
    "verbose": true,
    "preset": "ts-jest",
    "testEnvironment": "jsdom", // 替换原有的node，适配React组件测试
    "setupFiles": ["<rootDir>/jest.setup.js"],
    "transform": {
      "^.+\\.(js|jsx|ts|tsx)$": "babel-jest", // 处理src目录下的文件转换
      "node_modules/variables/.+\\.(j|t)sx?$": "ts-jest"
    },
    // 其余原有配置保持不变
  }
}

解决方案2：适配ES模块规则 #

如果你需要在测试中真实处理import.meta，可调整编译配置：

1. 安装依赖：

npm i -D @babel/plugin-syntax-import-meta babel-plugin-transform-import-meta

2. 修改.babelrc配置，新增插件：

{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react",
    "@babel/preset-typescript"
  ],
  "plugins": ["@babel/plugin-syntax-import-meta", "babel-plugin-transform-import-meta"]
}

3. 修改package.json中的Jest配置：

{
  "jest": {
    "verbose": true,
    "preset": "ts-jest",
    "testEnvironment": "jsdom",
    "extensionsToTreatAsEsm": [".ts", ".tsx"],
    "globals": {
      "ts-jest": {
        "tsconfig": {
          "module": "esnext"
        }
      }
    },
    "transform": {
      "^.+\\.(js|jsx|ts|tsx)$": "babel-jest",
      "node_modules/variables/.+\\.(j|t)sx?$": "ts-jest"
    },
    // 其余原有配置保持不变
  }
}

内容的提问来源于stack exchange，提问作者Nay Linn