Using graphql-tools's addMocksToSchema in a jest test doesn't work with gql from “@apollo/client”

[Freddie-Pike]

I'm trying to use graphql-tools's addMocksToSchema function in a jest test with Apollo Client to allow me to test components that query Apollo by returning mock data that I can define for myself. However, the mock data isn't being properly returned when using useQuery.

I have a UserButton button that I'm trying to write tests for. The component is as follows:

// UserButton.jsx
import React from "react";
import PropTypes from "prop-types";
import { gql } from "@apollo/client";
import { useQuery } from "@apollo/client";

import Button from "./Button";

const GET_CURRENT_USER = gql`
  query GetCurrentUser {
    id
    firstName
    lastName
  }
`;

function UserButton({ ...props }) {
  const { data: userData, loading } = useQuery(GET_CURRENT_USER);
  let buttonText = "Loading...";

  if (!loading) {
    buttonText = `${userData.firstName} ${userData.lastName}'s Button`;
  }
  return <Button {...props}>{buttonText}</Button>;
}
UserButton.propTypes = {
  children: PropTypes.node,
};

export default UserButton;

Here is my test:

// UserButton.test.jsx
import React from "react";
import { render, screen } from "@testing-library/react";
import UserButton from "../UserButton";
import ApolloMockingProvider from "../../providers/ApolloMockingProvider";
import userEvent from "@testing-library/user-event";
import { debug } from "webpack";

describe("UserButton", () => {
  let onClickMock;

  beforeEach(() => {
    jest.resetAllMocks();
    onClickMock = jest.fn();
  });

  it("Renders with first and last name.", async () => {
    render(
      <ApolloMockingProvider>
        <UserButton />
      </ApolloMockingProvider>
    );

    const button = screen.getByRole("button");

    expect(button).toHaveTextContent("Loading...")

    await waitFor(() => {
      expect(screen.queryByText("John Smith's Button")).toBeInTheDocument();
    });
  });
});

The ApolloMockingProvider is based off the following article and the code for it is as follows:

// ApolloMoockingProvider.jsx
import {
  ApolloClient,
  ApolloProvider,
  InMemoryCache,
} from "@apollo/client";
import { SchemaLink } from "@apollo/client/link/schema";
import { addMocksToSchema } from "@graphql-tools/mock";
import { makeExecutableSchema } from "@graphql-tools/schema";
import React from "react";

const schemaString = `
  type AvatarObjectType {
    id: Int,
    avatarUrl: String
  }
  scalar DateTime
  scalar GenericScalar
  type UserObjectType {
    id: Int,
    username: String,
    firstName: String,
    lastName: String,
    avatar: AvatarObjectType,
    dateCreated: DateTime,
    notificationPreferences: GenericScalar,
  }
  type Query {
    GetCurrentUser: UserObjectType,
  }
`;

const globalMocks = {
  String: () => "abc",
  Int: () => 56,
  UserObjectType: () => ({
    firstName: "John",
    lastName: "Smith",
  }),
};

const ApolloMockingProvider = ({ children }) => {
  const executableSchema = makeExecutableSchema({ typeDefs: schemaString });

  const schemaWithMocks = addMocksToSchema({
    schema: executableSchema,
    mocks: globalMocks,
  });

  const client = new ApolloClient({
    link: new SchemaLink({ schemaWithMocks }),
    cache: new InMemoryCache(),
  });

  return <ApolloProvider client={client}>{children}</ApolloProvider>;
};

export default ApolloMockingProvider;

The ApolloMockingProvider's globalMock's object that's passed into schemaWithMocks should return 'John Smith's Button' for the UserButton's Renders with first and last name. test. However, instead I get undefined for userData as shown by this error message:

UserButton › Renders with first and last name.

    TypeError: Cannot read property 'firstName' of undefined

      19 | 
      20 |   if (!loading) {
    > 21 |     buttonText = `${userData.firstName} ${userData.lastName}'s Button`;
         |                              ^
      22 |   }
      23 |   return <Button {...props}>{buttonText}</Button>;
      24 | }

Anybody know what the error here is? Reproduction repo is here with the failing test being located here:

[ardatan]

https://github.com/Freddie-Pike/graphql_tools_workings/blob/main/js/components/providers/ApolloMockingProvider.jsx#L50
Not sure if it is related to the issue but this should be { schema: schemaWithMocks} because the property of the input schema is schema in SchemaLink docs.
https://www.apollographql.com/docs/react/api/link/apollo-link-schema/

[Freddie-Pike]

https://github.com/Freddie-Pike/graphql_tools_workings/blob/main/js/components/providers/ApolloMockingProvider.jsx#L50
Not sure if it is related to the issue but this should be { schema: schemaWithMocks} because the property of the input schema is schema in SchemaLink docs.
https://www.apollographql.com/docs/react/api/link/apollo-link-schema/

Great catch! I changed the line to link: new SchemaLink({ schema: schemaWithMocks }), but unfortunately I'm still getting the same error 😢

[ardatan]

Could you create a reproduction on CodeSandbox?

[Freddie-Pike]

Could you create a reproduction on CodeSandbox?

Sorry for the lateness here, but I created a reproduction on CodeSandbox here.

Since CodeSandbox works a little differently than local, you'll see this error for the UserButton.test.js file:

expect(received).toBeInTheDocument()

received value must be an HTMLElement or an SVGElement.
Received has value: null

<html>
  <head />
  <body>
    <div />
  </body>
</html>

Error: expect(received).toBeInTheDocument()

received value must be an HTMLElement or an SVGElement.
Received has value: null

<html>
  <head />
  <body>
    <div />
  </body>
</html>
    at Object.a [as toBeInTheDocument] (https://codesandbox.io/static/js/2.9e4369f2f.chunk.js:1:142504)
    at eval (https://j75tc.csb.app/test/UserButton.test.js:50:73)
    at runWithExpensiveErrorDiagnosticsDisabled (https://j75tc.csb.app/node_modules/@testing-library/dom/dist/@testing-library/dom.esm.js:765:12)
    at checkCallback (https://j75tc.csb.app/node_modules/@testing-library/dom/dist/@testing-library/dom.esm.js:1206:32)

However, if you go to the console, you'll see Error: Uncaught [TypeError: Cannot read property 'firstName' of undefined] which is the same error I get in my test repo.

[desmond-tuiyot]

Found a solution to this?