如何在Jest测试中处理.gql文件导入 [英] How to handle .gql file imports in Jest tests

问题描述

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

I'm trying to test a component that imports a .gql file. When I try to build the component in a Jest file, I receive this error:

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

有人知道如何忽略导入吗?因为我不需要测试GraphQL调用.

Does anyone have any idea of how to ignore the import? Because I don't need to test the GraphQL call.

推荐答案

GraphQL文档(通常具有.gql扩展名). Jest无法立即使用webpack，需要进行配置以处理资产文件(如样式表，图像等)的任何导入.概述此过程 .

GraphQL documents (which typically have a .gql extension) can be imported directly if you use webpack and utilize the loader that comes with graphql-tag. Jest does not work with webpack out of the box and needs to be configured to handle any imports of asset files like stylesheets, images, etc. This process is outlined in the docs.

根据graphql-tag文档:

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

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

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

So you can utilize jest-transform-graphql along with the babel-jest plugin, which you're probably already using:

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

从技术上讲，可以通过添加docs中所示的moduleNameMapper config选项来模拟文件，但是，这样做很可能会破坏您的组件.

Mocking the file is technically possible by adding the moduleNameMapper config option as shown in the docs, however, doing so is likely to break your components.

这篇关于如何在Jest测试中处理.gql文件导入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！