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.
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.