Jest单元测试中导入GraphQL文件报错，如何解决？

看起来你遇到的核心问题是Jest没有正确使用@jagi/jest-transform-graphql来转换你的.gql文件，导致它把GraphQL查询当成JavaScript代码解析，抛出了语法错误。结合你的Vue+TypeScript项目场景，我整理了几个关键的修复步骤：

1. 确认依赖安装正确 #

首先，确保你安装的是维护中的@jagi/jest-transform-graphql包（旧的jest-transform-graphql已经被废弃），同时因为你的组件用了TypeScript，还需要补充ts-jest相关依赖：

npm install --save-dev @jagi/jest-transform-graphql ts-jest @types/jest

2. 调整Jest配置 #

你的现有配置缺少对TypeScript文件的处理规则，同时.gql的转换正则可以更精确。更新后的package.json中Jest配置如下：

"jest": {
  "moduleFileExtensions": [
    "js", "json", "vue", "gql", "ts"
  ],
  "watchman": false,
  "moduleNameMapper": {
    "^~/(.*)$": "<rootDir>/$1",
    "^~~/(.*)$": "<rootDir>/$1"
  },
  "transform": {
    "^.+\\.js$": "babel-jest",
    "^.+\\.ts$": "ts-jest",
    ".*\\.(vue)$": "vue-jest",
    "^.+\\.(gql|graphql)$": "@jagi/jest-transform-graphql"
  },
  "snapshotSerializers": [
    "jest-serializer-vue"
  ],
  "collectCoverage": true,
  "collectCoverageFrom": [
    "<rootDir>/components/**/*.vue",
    "<rootDir>/pages/*.vue"
  ],
  "globals": {
    "ts-jest": {
      "babelConfig": true,
      "vueJest": true
    }
  }
}

关键修改点： #

• 新增"ts"到moduleFileExtensions，让Jest识别TypeScript文件
• 添加^.+\\.ts$": "ts-jest"规则，用ts-jest处理TypeScript代码
• 调整.gql的匹配正则为^.+\\.(gql|graphql)$，确保覆盖所有GraphQL文件
• 新增globals配置，让ts-jest和vue-jest更好地配合处理Vue单文件组件中的TypeScript代码

3. 清除Jest缓存 #

Jest会缓存之前的转换结果，有时候旧缓存会导致新配置不生效，运行以下命令清除缓存：

npx jest --clearCache

4. 验证路径映射 #

确保你在index.vue中导入的~/apollo/queries/articles.gql路径是正确的——~应该映射到项目根目录，你的moduleNameMapper配置已经做了这个映射，确认apollo/queries/articles.gql文件确实存在于项目根目录下。

完成以上步骤后，重新运行你的测试，应该就能正确解析.gql文件，不再抛出SyntaxError了。

内容的提问来源于stack exchange，提问作者Mitch M