As a developer you must have heard a lot about tests. Tests help to avoid a lot of bugs and edge cases that otherwise you would never thought of.

There are four types of tests to conduct:

Unit Tests

Integration tests

E2E tests

System tests

This article will focus on GraphQL E2E tests. E2E tests are conducted by a robot, that is mimicking user's interactions with the app. In my React Native application, I use Detox for testing selected user paths. Detox is a library that lets us prepare Gray Box tests.

What is Gray Box testing?

Let’s say it’s a compromise between Black Box and White Box testing. Black Box tests are conducted by a person who has no knowledge about software (i.e. manual tests). White Box tests do the opposite. They are mostly done by machines, which have all the knowledge about app structure (i.e. unit tests). E2E tests are done from the user’s point of view and not from the engineer’s perspective, however, the tester still has some idea about code. It makes E2E a good addition to your test suite.

Setup Detox

Prepare your GraphQL server

This article https://blog.swmansion.com/detox-your-graphql-74b58dca3221 helped me a lot with the initial setup of a GraphQL server. However, I found out that it could be explained better, especially for a less experienced frontend developer.

Download your GraphQL schema

We need introspected schema to run our server. There are some ways to do this, but I managed to download it with graphql command-line interface.

install graphql-cli via NPM

npm install -g graphql-cli

Setup your .graphqlconfig file.

graphql init

You will be asked about your api endpoint. For me it was an url to locally running API server - http://localhost:5000/graphql

This is how the config looks:

Download the schema from the server Get introspected schema

graphql get-schema

Get a readable schema for future mocking

graphql get-schema --output schema.graphql

After downloading the introspected schema in json, you need to flatten query results by removing the data attribute from the root of file. The required result is under data attribute.

Prepare local server

I used the code from the article mentioned above. It was the main source for creating my mocks, I just changed it a little bit to make it work for me.

Mock your data

Let’s move on to mocking. In the app, I have all the data downloaded with graphql. Unfortunately, I cannot test creation of bookings, since users (students) are not allowed to do this. The only way to perform the test is to mock the data.

Here is a simplified version of the schema. Booking is the query for a single object and BookingConnectionWithCounts is for downloading a list of Bookings (the count is used for pagination in the web application).

In order to show data, we need to mock both types - one for the list and another for details.

You must mock all scalars from your schema. You can do it globally, but keep in mind that all scalars will have the same value. For me, I wanted my booking's dates to be varied because I need to show the time range. I’m using readable scheme for mocking.

Beware of warnings. If they overlay the component that you intended for detox to click, it can expand the warning instead and your test will fail. Mock everything that is required.

Test it!

When all is done, we can start testing. My tests are pretty simple:

Display bookings - checks the presence of booking in the list

Show booking details - enters into a booking details and checks whether the Booking has English lessons defined

Check bookings history - checks if bookings are rendered in history

Tests done by a machine: https://youtu.be/sLzNArDey3c

If you need help with your development, contact us.