How to test graphql testings

App Development Front-end
, ,
1

I have the bellow test, based on the test documentation , but when I run yarn test, I’m getting some errors, why that?
errors: You are trying to access a property or method of the Jest environment after it has been torn down. : > _getFakeTimers().useRealTimers();

Call retries were exceeded

  at ChildProcessWorker.initialize

the test:

test('should render mock graphql responses', async () => {
    
    jest.useFakeTimers()

    const ticketMock = {
      request: {
        query: GET_TICKETS,
      },
      result: {
        data: {
          tickets: [
            {
              id: 10,
              title: 'Hello',
            },
          ],
        },
      },
    }
  
    const { getByText } = render(<Ticket />, {
      graphql: { mocks: [ticketMock] },
    })
  
    expect(getByText(/Loading/)).toBeDefined()
    
    await waitFor(() => { getByText})
    await flushPromises()
    jest.runAllTimers()
  
    expect(getByText(/Hello/)).toBeDefined()

})

Does anyone know how I solve this? in react-apollo documentation only has references to test using the ql method from apollo-client, nothing about the react-apollo and their useQuery methods.

2

I also faced these errors with the VTEX test library and struggled to perform the tests.

In my case, I uninstalled the vtex/test-tools library and manually configured Jest to version 27, along with @apollo/react-testing version 3.1.4.

When testing my component, I use the MockedProvider to create mocks for both useQuery and useMutation.

Here’s an example of how a useMutation was mocked:

import { UtmsPersistence, mapUrlUtmsToVars } from "./UtmsPersistence";
import { render, act, waitFor, screen } from "@testing-library/react";
import { OrderFormProviderMock } from "../../__mocks__/vtex.order-manager";
import { useRuntime } from "../../__mocks__/vtex.render-runtime";
import { MockedProvider } from "@apollo/react-testing";
import React from "react";
import UPDATE_MARKETING_DATA from "./graphql/UPDATE_MARKETING_DATA.graphql";

describe("components: UtmsPersistence", () => {
  const setOrderForm = jest.fn();

  beforeEach(jest.clearAllMocks);

  it("should not render anything", async () => {
    useRuntime.mockReturnValue({
      route: {
        queryString: {}
      }
    });
    await act(async () => {
      render(
        <MockedProvider addTypename={false} mocks={[]} >
          <OrderFormProviderMock >
            <UtmsPersistence />
          </OrderFormProviderMock>
        </MockedProvider>
      );
    });

    const textInDocument = screen.queryByText(/./);
    expect(textInDocument).not.toBeInTheDocument();

  });

  it("should not apply parameters that are not used", async () => {
    useRuntime.mockReturnValue({
      route: {
        queryString: {
          fruta: "banana",
          animal: "vaca",
        }
      }
    });
    const orderForm = {
      marketingData: {
        coupon: "",
        utmCampaign: "",
        utmMedium: "",
        utmSource: "",
        utmiCampaign: "",
        utmiPart: "",
        utmiPage: "",
        __typename: "MarketingData"
      }
    };

    const gqlMock = [{
      request: {
        query: UPDATE_MARKETING_DATA,
        variables:
          { input: { utmSource: "source" } }
      },
      newData: jest.fn(() => ({
        data: {
          updateOrderFormMarketingData: {
            marketingData: {
              coupon: "",
              utmCampaign: "",
              utmMedium: "",
              utmSource: "",
              utmiCampaign: "",
              utmiPart: "",
              utmiPage: "",
              __typename: "MarketingData"
            }
          }
        }
      })),
    }];

    await act(async () => {
      render(
        <MockedProvider addTypename={false} mocks={gqlMock} >
          <OrderFormProviderMock orderForm={orderForm} setOrderForm={setOrderForm}>
            <UtmsPersistence />
          </OrderFormProviderMock>
        </MockedProvider>
      );
    });

    expect(gqlMock[0].newData).not.toHaveBeenCalled();
    expect(setOrderForm).not.toHaveBeenCalled();
  });

If you have any questions about setting up a specific frontend testing environment to run VTEX IO projects and avoid this error, I created a library/configuration on npm that you can install. It comes with all the necessary packages and the most up-to-date versions compatible with VTEX. Since both the Node and React/TypeScript versions from VTEX IO are outdated, finding compatible solutions can be challenging.

jest-vtex-io