reactjs - gatsbyJS中graphQL查询和页面组件的集成测试

Question

我想对我的页面查询 + 页面组件进行集成测试：

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 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.

是否可以编写集成测试检查 graphQL 查询？

我知道我可以模拟 graphql 页面查询mocks以避免此错误，但我希望不要模拟 graphql：

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

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

标签： reactjstestinggraphqlintegration-testinggatsby