Member-only story

NextJs 14 — App Router and Unit Testing (w/ async pages)

Alberto Cubeddu
7 min readDec 4, 2023

Unit testing is pivotal in the Software Development Life Cycle, enabling rapid progress and code refactoring with confidence in the application’s functionality. It minimises production bugs, fosters creative problem-solving, and accelerates coding as the application scales.

NextJS logo

This guide uses NextJs (Version ^14) with the App Router and Jest to set up the unit-testing framework. If you want to skip the step-by-step tutorial, jump to the end of the guide and visit the GitHub link.

Install NextJs

To start, let’s create a new NextJS application using: npx create-next-app@latest

npx create-next-app@latest
npx create-next-app@latest

The command will install a fresh version of NextJS (at the time of writing: 14.0.3) with the configuration specified above.

Install the Jest packages.

To enable the unit testing, we need to install different packages; please run the following command on your terminal inside the root directory of…

Create an account to read the full story.

The author made this story available to Medium members only.
If you’re new to Medium, create a new account to read this story on us.

Or, continue in mobile web

Already have an account? Sign in

Alberto Cubeddu
Alberto Cubeddu

Written by Alberto Cubeddu

Leadership || Management || Innovation - Technology Director & Former Head Of Engineering

Responses (4)

Write a response

Very good introduction.

may i use it with next 14 and page router?

Great article, did you try to test an async Page or server component? There is an issue I am facing where async components/pages throw an error:


Error: Uncaught [Error: Objects are not valid as a React child (found: [object Promise]). If you meant to render a collection of children, use an array instead.]—