Testing relay hook with react testing library

Followed by the tutorial provided in the previous post, we’d like to share how to test the relay queries.

In our opensource project HackaTalk which aims to share our development stacks with others, we are using react-testing-library in react-native.

I’ve spent time in mocking relay queries nicely with jest and use it to test features with react-testing-library.

We’ve implemented a mutation query in HackaTalk with the relay in the previous post. I’ve read through the testing relay components in relay official doc and didn’t have much trouble using it in relay experimental which is using react hook.

https://www.slideshare.net/deview/112rest-graph-ql-relay

Here is how I’ve tested SignIn mutation query.

1. Testing mutation query

https://medium.com/dooboolab/integrate-relay-hook-in-expo-app-bae12d50a130

The above screenshot is what I’ve written in the previous post. Now I like to test the above mutation query and achieve the coverage in mutationConfig shown below.

Above code will be triggered after clicking on the signIn button in SignIn screen in Hackatalk. When we do not mock mutation query properly, the test will fail when we trigger the signIn button with fireEvent API.

import { environment } from '../../../providers';
...
it('should call signIn when button has clicked and navigation switches to [MainStack]', async () => {
  ...
  act(() => {
    fireEvent.press(btnSignIn);
  });
  const operation = environment.mock.getMostRecentOperation();
  environment.mock.resolve(
    operation,
    MockPayloadGenerator.generate(operation),
  );
}

Above coverage could be achieved simply by adding environment.mock.getMostRecentOperation and able to resolve it using MockPayloadGenerator provided by relay-test-utils.

2. Testing preload query

Ironically, the problem arises when I tried to test the query. First, I’ve created meQuery in ProfileUpdate screen.

const meQuery = graphql`
  query ProfileUpdateMeQuery {
    me {
      id
      email
      name
      nickname,
      statusMessage,
      verified
    }
  }
`;

After running yarn relay, I’ve imported the query.

import type { ProfileUpdateMeQuery } from '../../__generated__/ProfileUpdateMeQuery.graphql';

Then added environment data as shown below.

Screenshot of `ProfileUpdate` in `hackatalk-mobile`

I’d like to tell you how to test above query instead of further TL;DR.

1. Import ProfileUpdateMeQuery

import ProfileUpdateMeQuery from '../../../__generated__/ProfileUpdateMeQuery.graphql';

2. Mock resolver

const mockResolver = {
  Profile: (): any => ({
    id: 'id',
    email: 'email',
    name: 'name',
    nickname: 'nickname',
    statusMessage: '',
    verified: true,
  }),
};

3. Prepare for the query and pass down the props

environment.mock.queuePendingOperation(ProfileUpdateMeQuery, {});
environment.mock.queueOperationResolver(
  (operation) => MockPayloadGenerator.generate(operation, mockResolver),
);
const prepared = {
  postDetailQuery: preloadQuery(
    environment, ProfileUpdateMeQuery, {},
  ),
};
props = createTestProps({ prepared });

Here is the final source code.

I’ve gone through the source code to test my relay components, but it didn’t help. I hope my time saves others who want to test the relay component.

Thanks for reading 📖