title: How to test GraphQL queries with fragments using jest
body: <p>Problem: I would like to test a GraphQL query that lives in a <code>.graphql</code> file like this:</p>
  
  <pre><code>#import '../../fragments/Widget.graphql'
  
  query WidgetFragment($id: ID) {
      readWidgetFragment(id: $id) {
          ...Widget
      }
  }
  </code></pre>
  
  <p>To create a GraphQL schema with mocked resolvers and data, I use  <code>makeExecutableSchema</code> and <code>addMockFunctionsToSchema</code> from <a href="https://github.com/apollographql/graphql-tools" rel="nofollow noreferrer">graphql-tools</a>.</p>
  
  <p>To run the query from inside a jest test, my understanding is that I need to use the <code>graphql()</code> function from <a href="https://graphql.org/graphql-js/graphql/#graphql" rel="nofollow noreferrer">graphql-js</a>.</p>
  
  <p>This function needs the query as a <strong>string</strong>, so I tried two different ways, but neither of them worked:</p>
  
  <ul>
  <li>Parse the <code>.graphql</code> file as a normal text file, giving me the raw string (using the <a href="https://github.com/keplersj/jest-raw-loader" rel="nofollow noreferrer">jest-raw-loader</a> in my jest config).
  This gives me: <code>Failed: Errors in query: Unknown fragment "Widget".</code> when I run the query.</li>
  <li>Parse the <code>.graphql</code> file into a <code>query</code> object using <a href="https://github.com/remind101/jest-transform-graphql" rel="nofollow noreferrer">jest-transform-graphql</a>. I believe this should be the right approach, because it <em>should</em> resolve any imported fragments properly. However, to execute the query, I need to pass <code>query.loc.source.body</code> to the <code>graphql</code>, which results in the same error message as option 1.</li>
  </ul>