Add a way to test pages in isolation

[freiksenet]

Summary

Currently one can't test pages with graphql queries. It would have been great if they would be testable in isolation.

Basic example

There are two main ways to do it. Either we add a programmatic way to create "gatsby context", which is basically all that is needed to execute Gatsby GraphQL and then pass that to the page component so that it's rendered. Second way would be to add and/or document way to mock graphql calls in Gatsby pages.

[herecydev]

@freiksenet I'm keen to pick this up.

I had a little play trying to invoke this stuff manually and I think it's possible. It looks like at a minimum the following lines need running:

gatsby/packages/gatsby/src/bootstrap/index.ts

Lines 14 to 25 in 603a501

	export async function bootstrap(
	context: IBuildContext
	): Promise<{ bootstrapGraphQLFunction: Runner }> {
	const currentContext: IBuildContext = {
	...context,
	...(await initialize(context)),
	}
	await customizeSchema(currentContext)
	await sourceNodes(currentContext)
	const { bootstrapGraphQLFunction } = await buildSchema(currentContext)

At that point we should have a schema. Do you have some further comments/design ideas about how you would achieve this?

[herecydev]

My ideal end result would be something like the following:

import { createGraphqlContext } from "gatsby"
import MyGraphQlPage from "./pages/myGraphQlPage"

describe("graphql tests", () => {
  beforeAll(async () => {
    // mock api requests that sourceNodes will make
    stubData()

    // runs sourceNodes, schemaCustomizations, etc
    const runner = await createGraphqlContext();

    // ideally extract the following log in some nice helper
    const { data } = runner(myGraphQlPage.query)
    render(<MyGraphQlPage data={data} />)
  });

  it("works", () => {
    screen.getByText("somegraphqldata")
  });
});