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 related
graphqlcalls 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(),
};
Aucun commentaire:
Enregistrer un commentaire