Integration testing of graphQL query and a page component in gatsbyJS

Question

I would like to have an integration test for my page query + page component:

import React from "react";
import { graphql } from "gatsby";

const NotFound = ({ data }) => {
  const { title, text } = data.allFile.edges[0].node.childDataJson;

  return (
    <React.Fragment>
      <h1>{title}</h1>
      <p>{text}</p>
    </React.Fragment>
  );
};

export const query = graphql`
  query {
    allFile(filter: { name: { eq: "404" } }) {
      edges {
        node {
          childDataJson {
            title
            text
          }
        }
      }
    }
  }
`;

export default NotFound;

What I would like to test is if the query structure is correct, and therefore check the presence of the title in DOM:

describe("404 page", () => {
  it("Contains a title", () => {
    const { getByText } = render(<NotFound />);
    expect(getByText("Not found")).toBeInTheDocument();
  });
});

I get the following error: It appears like Gatsby is misconfigured. Gatsby relatedgraphqlcalls are supposed to only be evaluated at compile time, and then compiled away. Unfortunately, something went wron g and the query was left in the compiled code.

Is it possible to write integration test checking graphQL queries?

I know that I can mock the graphql page query in mocks to avoid this error, but I would like for graphql not to be mocked:

const React = require("react");
const gatsby = jest.requireActual("gatsby");

module.exports = {
  ...gatsby,
  graphql: jest.fn(),
};