Type safe GraphQL mocks

Introduction

Step #0

—

Published on 1 Aug 2022

In this guide, you will set up tests that mock GraphQL responses in a type-safe way using NextJS, Jest, MSW and GraphQL Codegen.

Step 1 - Displaying cart items

Step #1

—

Published on 1 Aug 2022

In this step you're going to display cart items in the browser. To do this, you will setup a NextJs application and fetch cart items from a GraphQL API.

Step 2 - Testing cart items page

Step #2

—

Published on 1 Aug 2022

In this step you're going to setup Jest to test NextJs pages, and then write a test to verify the functionality of the cart page.

Step 3 - Mocking GraphQL query inside test using MSW

Step #3

—

Published on 1 Aug 2022

In this step you will add a library to your test that intercepts requests and returns mock results. This results in faster and more robust tests. Faster because you cut out the slowest link in this setup, the network. More robust because you get consistent API responses.

Step 4 - Adding types using GraphQL Codegen

Step #4

—

Published on 1 Aug 2022

Remember the annoying `// @ts-ignore` in `pages/index.tsx`? That's because `useCart` is not type safe yet. Let's fix that using GraphQL Codegen.

Step 5 - Adding types to the mock data

Step #5

—

Published on 1 Aug 2022

Like tests, types increase your confidence in your code, so leveraging the power of both techniques is a good idea. Another benefit is a nicer development experience with mock autocompletion.