diff --git a/README.md b/README.md index 6f5364c58..2ea1a59eb 100644 --- a/README.md +++ b/README.md @@ -532,6 +532,7 @@ In our test, we can pass a `mocks` prop to `GqlMockedProvider` to tell it which ```tsx import { render } from '@testing-library/react'; +import { GqlMockedProvider } from '__tests__/util/graphqlMocking'; describe('PartnersComponent', () => { it('shows the contact name', async () => { @@ -574,12 +575,13 @@ query ContactDetails($accountListId: ID!, $contactId: ID!) { ``` ```tsx -import { render } from '@testing-library/react'; +import { render, waitFor } from '@testing-library/react'; +import { GqlMockedProvider } from '__tests__/util/graphqlMocking'; const mutationSpy = jest.fn(); describe('ContactComponent', () => { - it('shows the contact name', () => { + it('shows the contact name', async () => { render( { , ); - // calls[0] is the first call, and calls[0][0] is the first argument of the first call - expect(mutationSpy.calls[0][0]).toMatchObject({ - operation: { - // Matches the name of the query operation defined in the component's .graphql file - operationName: 'ContactDetails', - variables: { - accountListId: 'account-list-1', - contactId: 'contact-1', + // The operation spy is called asynchronously so we have to wait for it to be called + await waitFor(() => + // lastCall is an array of the arguments from the most recent call + expect(mutationSpy.mock.lastCall[0]).toMatchObject({ + operation: { + // Matches the name of the query operation defined in the component's .graphql file + operationName: 'ContactDetails', + variables: { + accountListId: 'account-list-1', + contactId: 'contact-1', + }, }, - }, - }); + }), + ); }); }); ``` @@ -615,7 +620,8 @@ mutation DeletePartner($accountListId: ID!, $contactId: ID!) { ``` ```tsx -import { render } from '@testing-library/react'; +import { render, waitFor } from '@testing-library/react'; +import { GqlMockedProvider } from '__tests__/util/graphqlMocking'; const mutationSpy = jest.fn(); @@ -632,17 +638,20 @@ describe('ContactComponent', () => { userEvent.click(await findByText('Delete')); - // The first operation was the query to load the contact, so we test the second operation - expect(mutationSpy.calls[1][0]).toMatchObject({ - operation: { - // Matches the name of the mutation operation defined in the component's .graphql file - operationName: 'DeletePartner', - variables: { - accountListId: 'account-list-1', - contactId: 'contact-1', + // The operation spy is called asynchronously so we have to wait for it to be called + await waitFor(() => + // lastCall is an array of the arguments from the most recent call + expect(mutationSpy.mock.lastCall[0]).toMatchObject({ + operation: { + // Matches the name of the mutation operation defined in the component's .graphql file + operationName: 'DeletePartner', + variables: { + accountListId: 'account-list-1', + contactId: 'contact-1', + }, }, - }, - }); + }), + ); }); }); ```