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

Jest logo
npm i -D jest jest-environment-jsdom ts-jest

npm i -D @testing-library/jest-dom @testing-library/react @testing-library/user-event

npm i -D @types/jest eslint-plugin-jest-dom eslint-plugin-testing-library

After running the command, your package.json should look like this:

"devDependencies": 
"@testing-library/jest-dom": "^6.1.4",
"@testing-library/react": "^14.1.2",
"@testing-library/user-event": "^14.5.1",
"@types/jest": "^29.5.10",
"eslint-plugin-jest-dom": "^5.1.0",
"eslint-plugin-testing-library": "^6.2.0",
"jest": "^29.7.0",
"jest-environment-jsdom": "^29.7.0",
"ts-jest":"^29.1.1"
}

When you’re running the install, the version will most likely be updated; therefore, if they don’t match the above, that’s perfectly ok.

Configure the package.json

--

--

Alberto Cubeddu

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