Building Dynamic Web Applications with Next.js/

...

/

Running Unit and Integration Tests

Running Unit and Integration Tests

Learn to run unit and integration tests using Jest.

We'll cover the following...

In this lesson, we’ll write some integration and unit tests by using one of the most popular test runners in the JavaScript ecosystem: JestJest is a JavaScript testing framework designed to ensure correctness of any JavaScript codebase. It allows us to write tests with an approachable, familiar, and feature-rich API that gives us results quickly..

Press + to interact

Let’s see a small web application that we'll be using as an example for writing our tests.

Click the “Run” button below to execute the code. Once the execution is completed, see the output by clicking the link below. 

export PORT=5000
ln -s /app/node_modules/ /usercode/boilerplate 
cd /usercode/boilerplate
npm run dev
Application to be tested

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 and retrieve the article ID from the article URL.

  • Two REST APIs: One for getting all the articles and one for getting a specific article given an ID.

Jest is the only dependency that we’ll need for our tests because it acts both as a testing framework and as a test runner. It provides an extensive set of features that will make our development (and testing) experience pleasant.

Given that we’re writing our functions and components using ESNext features, we want to tell Jest to use the default Next.js babel preset for transpilingTranspilation is the process of converting a language into an equivalent version of the same language. Modern JavaScript can be transpiled into older syntax, making it compatible with older browsers. those modules correctly. We can do that by creating a .babelrc file in our project’s root and adding the following content:

Press + to interact
{
    "presets": ["next/babel"]
}

The next/babel preset comes preinstalled with Next.js, so we don’t need to install anything, and we’re ready to go.

We can start using it without any other configuration because it comes preconfigured for running every file ending with .test.js or .spec.js.

Still, there are different approaches for how to write and where to place those files. For example, some people prefer to have a test file close to the source file, and others prefer to have all the tests inside a tests/ directory. Of course, neither of those approaches is wrong: it’s up to our taste.

Note: Next.js serves every .js, .jsx, .ts, and .tsx file placed inside of the pages/ directory as an application page. Therefore, we should never place any test file inside that directory, or Next.js will try to render it as an application page. We’ll see how to test Next.js pages in the next lesson while writing end-to-end tests.

Let’s write our first test, starting from the easiest part of our code base: the utility functions. We can create a new file, utils/tests/index.test.js, and start by importing all the functions that we can find in our utils/index.js file: