How to handle .gql file imports in Jest tests

Question

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';
ˆ

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

Answer 1

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.

According to the graphql-tag documentation:

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

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"
  }
}

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.