How to Unit Test a Form Component with React Testing Library and Jest — Next.js 13 App Router, Complete, Step-by-step

Create mini robots to make sure components meet expectations.

Complete Step-by-step Tutorial

1. Read on Medium

Series:

1. Code Tips on Medium

Stack:

1. Next.js 13
2. SASS
3. React Testing Library
4. Jest

Preview

Drawing of the Form component annotated with my expectations.

A screenshot showing all expectations passed.

Getting Started

Prerequisites

Before you begin, ensure you have the following software installed:

1. GitHub CLI
2. Node.js 16.8 or later.
3. macOS, Windows (including WSL), and Linux are supported.
4. Prettier VS Code Extension

Installation

1. Create your GitHub repo using this project as template.

gh repo create <repo-name> --public --template=saikise/simple-unit-test-ctwnj

2. Install the dependencies listed in package.json.

npm i

3. Play with the app via development server.

npm run dev

4. Run the test script via Terminal

npm run test:ci