Интеграционное тестирование запроса graphQL и компонента страницы в gatsbyJS - PullRequest
Новая
       80

Интеграционное тестирование запроса graphQL и компонента страницы в gatsbyJS

1 голос
/ 07 января 2020

Я хотел бы провести интеграционный тест для моего запроса страницы + компонента страницы: 

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;

Я хотел бы проверить, правильна ли структура запроса и, следовательно, проверить наличие заголовка в DOM: 

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

Я получаю следующую ошибку: It appears like Gatsby is misconfigured. Gatsby related graphql calls 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.

Можно ли написать интеграционный тест, проверяющий запросы GraphQL?

Я знаю что я могу смоделировать запрос страницы graphql в mocks, чтобы избежать этой ошибки, но я бы хотел, чтобы graphql не был смоделирован: 

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

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