Not able to properly add mocks to schema

[xyzrob]

Hi,

I want to setup some custom utils for our jest testing environment, since Apollos MockedProvider isn't sufficient enough.
My goal is to have some generated mock data if needed, but also to have the possibility, to add custom mocks.
Surfing through forums I've found following blog, which some of you could already be familiar with:
https://www.arahansen.com/testing-apollo-components-using-react-testing-library/

The idea is clear to me. I just need to get it working with custom Scalars. It's almost running, but I seem to be missing some information or have overseen something in the graphql-tool docs perhaps.

I started by generating a GraphQL schema out of an introspection file and made it useable by using graphql-tools makeExecutableSchema. So far so good.

However trying get addMocksToSchema running as intended, I'm facing some issues.

With my schema looking something like:

scalar Guid

type TemperatureControlType {
  id: Guid!
  name: String
  temperatureValue: DataPointType!
}

type DataPointType {
  currentValue: String!
  description: String
  identifier: Guid!
  label: String!
}

my custom render function:

import { SchemaLink } from "@apollo/client/link/schema";
import { makeExecutableSchema } from "@graphql-tools/schema";
import { ApolloClient, ApolloProvider, InMemoryCache } from "@apollo/client";
import { addMocksToSchema } from "@graphql-tools/mock";
import { render as rtlRender } from "@testing-library/react";
import { buildClientSchema, GraphQLScalarType, printSchema } from "graphql";
import { v4 as uuidv4 } from "uuid";
import introspection from "../graphql.schema.json";

export const render = (component, { mock }) => {
  const graphqlSchemaObj = buildClientSchema(introspection);
  const sdlString = printSchema(graphqlSchemaObj);

  const schema = makeExecutableSchema({ typeDefs: sdlString });

  const mockSchema = addMocksToSchema({
    schema,
    mocks: { Guid: () => uuidv4(), ...mock },
  });

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

  return rtlRender(<ApolloProvider client={client}>{component}</ApolloProvider>);
};

and my test looking something like this:

import { screen } from "@testing-library/react";
import { render } from "utils/test-utils/render";
import ComponentToTest from "./component-to-test";

it("should render the temperature current value", async () => {
  render(
    <ComponentToTest id="someGuid" />, // id gets passed to query, to get a specific item
    {
      mock: {
        TemperatureControlType: {
          temperatureValue: {
            currentValue: "20",
          },
          id: "someGuid"
        },
      },
    },
  );

  await screen.findByText("20");
});

I get some console errors looking like:

Missing field 'identifier' while writing result {
  "currentValue": "Hello World",
  "__typename": "DataPointType"
 }

or

Missing field 'label' while writing result {
  "currentValue": "Hello World",
  "__typename": "DataPointType"
}

basically for every field I haven't mocked.

Adding those fields to the test with some dummy data, doesn't solve the issue. Same console errors are still being displayed.

I guess I get something wrong with my addMocksToSchema. The mocking is somehow working, since "Hello World" is part of the console error, though I wonder why even in the test my custom mocked currentValue: "20" is being replaced by "Hello World" and anyway none of my custom mocks are working.

Would be glad if someone could help me out, since I'm trying getting my tests running for some days now. I think I can make it work with graphql-tools, I'm just missing some little detail I guess..