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

Question

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

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

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

Answer 1

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

根据 graphql-tag 文档：

Testing environments that don't support Webpack require additional configuration. For Jest use jest-transform-graphql.

因此您可以将 jest-transform-graphql 与您可能已经在使用的 babel-jest 插件一起使用：

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

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

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

How to handle .gql file imports in Jest tests

apollo

jestjs

graphql

vue-apollo

graphql-tag