如何在 Jest 测试中处理 .gql 文件导入答案

【问题标题】：How to handle .gql file imports in Jest tests如何在 Jest 测试中处理 .gql 文件导入
【发布时间】：2019-10-27 07:21:27
【问题描述】：

我正在尝试测试一个导入 .gql 文件的组件。当我尝试在 Jest 文件中构建组件时，我收到此错误：

( object. anonymous function(module exports require __dirname __filename global jest) {
query getUser {                                                
      ˆˆˆˆˆˆˆ
<script>
import GET_USER from 'PATH';
ˆ

有没有人知道如何忽略导入？因为我不需要测试 GraphQL 调用。

【问题讨论】：

您能否编辑您的问题并将图像替换为实际的错误消息？这将帮助其他用户在遇到相同错误时找到您的问题。

标签： graphql jestjs apollo vue-apollo graphql-tag

【解决方案1】：

如果您使用 webpack 并使用 graphql-tag 附带的加载器，则可以直接导入 GraphQL 文档（通常具有 .gql 扩展名）。 Jest 不适用于开箱即用的 webpack，需要配置为处理任何资产文件（如样式表、图像等）的导入。此过程在in the docs 中进行了概述。

根据graphql-tag 文档：

不支持 Webpack 的测试环境需要额外的配置。对于 Jest，请使用 jest-transform-graphql。

因此，您可以使用 jest-transform-graphql 以及您可能已经在使用的 babel-jest 插件：

"jest": {
  "transform": {
    "\\.(gql|graphql)$": "jest-transform-graphql",
    ".*": "babel-jest"
  }
}

在技术上可以通过添加moduleNameMapper 配置选项（如文档中所示）来模拟文件，但是这样做可能会破坏您的组件。

【讨论】：

我在我的nuxt 项目中遇到了这个问题，如上所述添加jest-transform-graphql 并添加moduleFileExtensions: ['js', 'vue', 'json', 'gql'], 后错误消失了。