Chapter 9: Testing Next.js

Testing is an essential part of the whole development workflow. It gives you more assurance that you're not introducing bugs into your code, as well as that you're not breaking any existing features.

Testing Next.js specifically is not different from testing any other React app or Express.js, Fastify, or Koa application. In fact, we can divide the testing phases into three different stages:

• Unit testing
• End-to-end testing
• Integration testing

We will look at those concepts in detail in this chapter's sections.

If you already have previous experience in writing a React application, you're likely to re-utilize your knowledge for testing a Next.js-based website.

In this chapter, we will look in detail at the following:

• An introduction to testing and testing frameworks
• Setting up a testing environment
• How to use some of the most popular test runners, frameworks, and utility libraries

By...

Technical requirements

To run the code examples in this chapter, you need to have both Node.js and npm installed on your local machine.

If you prefer, you can use an online IDE such as https://repl.it or https://codesandbox.io; they both support Next.js, and you don't need to install any dependency on your computer. As with the other chapters, you can find the code base for this chapter on GitHub: https://github.com/PacktPublishing/Real-World-Next.js.

An introduction to testing

As we've seen during this chapter's introduction, testing is an essential part of any development workflow and can be divided into three separate testing phases:

• Unit testing: These tests aim to make sure that every single function in your code is working. They do that by testing the codebase's functions individually against correct and incorrect inputs, asserting their results and possible errors to ensure they're working expected.
• End-to-end testing: This testing strategy reproduces a typical user interaction with your application, ensuring that the app responds with a specific output once a given action occurs, just like we would do by testing the website manually on a web browser. For instance, if we build a form, we want to automatically guarantee that it is working correctly, validating the input, and performing a specific action on the form's submission. Also, we want to test that the user interface is rendering...

Running unit and integration tests

In this section, we will write some integration and unit tests by using one of the most popular test runners in the JavaScript ecosystem: Jest.

Before installing all the dependencies we need, clone the following repository, which already contains a small web application that we'll be using as an example for writing our tests: https://github.com/PacktPublishing/Real-World-Next.js/tree/main/09-testing-nextjs/boilerplate.

It's a simple website with the following features:

• Two pages: a home page containing all the articles in our blog and a single article page.
• The article page URL implements the following format: <article_slug>-<article-id>.
• There are some utility functions that create the page's URL, retrieve the article ID from the article URL, and so on.
• Two REST APIs: one for getting all the articles and one for getting a specific article given an ID.

Now let's enter the project we...

End-to-end testing with Cypress

Cypress is a powerful testing tool that can test anything that runs on a web browser.

It enables you to write and run unit, integration, and end-to-end tests efficiently by running them on Firefox and Chromium-based browsers (for example, Google Chrome).

So far, we have written tests for understanding whether our functions and components are working as expected. Now it's time to test whether the entire application is working correctly.

To get started with Cypress, we just need to install it as a dev dependency in our project. We will be using the same project as the latest section, but if you want to get started from a clean project, you can clone the following repository and get started from there: https://github.com/PacktPublishing/Real-World-Next.js/tree/main/09-testing-nextjs/unit-integration-tests.

Let's install Cypress by typing the following command into the terminal:

yarn add -D cypress

Once Cypress is installed, we...

Summary

In this chapter, we've seen how to write unit, integration, and end-to-end tests using some of the most popular libraries and test runners out there, such as Cypress, Jest, and react-testing-library.

As mentioned multiple times during the chapter, testing is essential for any application development and release process. It should be taken seriously as it can be the difference between a successful and an unsuccessful product.

In the next chapter, we will focus on a different yet crucial topic: SEO and performance. Even if our code base is 100% tested, well-designed, and working great, we need to consider its SEO score and performance. In many cases, we want as many people as possible to be browsing our applications, and we must take care of search engine optimization to reach a large audience to validate our product.