Jest Test Tutorial: 5 Easy Steps - Testim Blog (2023)

When it's aboutUnit Testing Frameworks for JavaScript, Jest is certainly a serious contender for the top spot.

Jest was originally developed by Facebook specifically for testing React apps. It is one of the most popular testing methods.To reactcomponents The tool has enjoyed great popularity since its inception. This popularity has led to Jest being used for testing both front-end and back-end JavaScript applications.

In this article, we'll talk about the advantages and disadvantages of Jest to help you get started with testing. Before we get to that, let's review unit testing and its importance to software quality.

After that, let's report specifically on Jest and explain:

• your definition
• What are your main advantages
• and some of its most important properties

We'll walk you through a 100% hands-on tutorial on how to get started with Jest. You'll learn about vocabulary associated with Jest trials, such as taunts and spies. We'll also cover some of the basics of testing Jest, how to use description blocks and keywords.ESYhope. Finally, let's take a look at snapshot testing and why it's particularly useful for front-end testing. Let's start!

The what and why of unit testing

Software testing can often be overwhelming. There are many types of tests, each working at a different level, testing different aspects of the application and providing its own type of feedback.

Among the numerous types ofautomated tests, unit tests are often cited as the most important; to see:Test Automation Pyramid. Unit tests check the smallest parts of your application in complete isolation and ensure they work as expected. When doing unit tests, you must not interact with external dependencies, for example, make an HTTP call, nor generate any kind ofside effect.

Due to these properties, unit tests are usually:

• to run very quickly
• relatively easy to set up, does not require extensive configuration
• very accurate in your comments

On the scale of automated testing, unit testing is at the opposite end of the spectrum fromend-to-end test. The latter provide less accurate feedback, are generally slower, more fragile, but more realistic. The former are very accurate in their feedback, they are fast and usually only fail due to bugs in the code.

However, they are less realistic as real-life users do not interact with the units in complete isolation.

In short, unit tests are far from the only type of testing your application needs, but they should be an essential part of your testing strategy.

What is it?

Jest is a popular JavaScript testing framework.It claims to offer "excellent JavaScript tests" and I bet you'll agree with that statement after our tutorial! Jest prides itself on providing a complete and hassle-free experience.

The integrity stems from the fact that Jest doesn't rely on third-party tools for much of its functionality, as some competitors do. And the hassle-free part is because of Jest's zero-configuration setup. You can install it and start writing your first test in no time.

As mentioned in the introduction, Jest has gained a lot of popularity over the last few years for both frontend and backend testing. Many large companies including Twitter, Instagram, Pinterest and Airbnb use the Jest for React test.

Jest itself is not really a library, but rather a framework. There's even a CLI tool you can use from the command line. To give an example, the CLI tool allows you to run only specific tests that match a pattern. Also, it includes many more features that you can find onCLI documentation.

In short, Jest offers a test runner, an assertion library, a CLI tool, and excellent support for various simulation techniques. All this makes it a framework and not just a library.

Let's take a quick look at the benefits of Jest.

yes benefits

Here is a short list of Jest benefits.

1. Provides a CLI tool to easily control your tests
2. It comes with an interactive mode that automatically runs all the tests affected by the code changes you made in your last commit.
3. Provides syntax for testing a single test or skipping tests.onlyY.hop. This feature is useful when debugging individual tests.
4. great dealsdocumentationwith many examples and a supportive community. You can join the Jest community throughdiscordor ask questionspacket overflow
5. This makes discovery easier for developers as it is one of the most painful tasks for test engineers. We explain in more detail how the prank taunt works in this post.
6. there are offerscode coverageReady to use via CLI - just use the-Chargeoption or thegroup coverageproperty in the Jest configuration file.

joke properties

On the Jest website we can find four main features of Jest:

• zero configuration:"Jest aims to work out of the box and out of the box for most JavaScript projects." This means you can simply install Jest as a dependency for your project and start writing your first test with little to no customization.
• Isolated:Isolation is a very important property when running tests. It ensures that different tests do not affect each other's results. With Jest, tests run in parallel, each in its own process. This means that they cannot interfere with other tests, and Jest acts as an orchestrator that collects the results of all test processes.
• Snapshots:Snapshots are an important feature for front-end testing because they allow you to check the integrity of large objects. This means that you don't have to write large assertive tests to verify that all properties of an object exist and are of the correct type. You can just take a picture and Jest will do magic. Later, we will discuss in detail how the snapshot test works.
• Advanced API:Jest is known to have a rich API that offers many types of specific assertions for very specific needs. Besides, it'sgreat documentationshould make it easy for you to get started.

Before we delve a little deeper into Jest's vocabulary, we'll show you how to start using this tool in practice.

Get started with Jest: a hands-on 5-step tutorial

Let's walk you through our five-step tutorial now to get started testing with Jest.

1. Install Is Global

The first step is to install Jest globally. This will give you access to the Jest CLI. Make sure you have Node.js installed as it will be using npm.

Go to your terminal and run the following command:

After installation is complete, run itis the versionto see the installed version.

2. Create a sample project

You will now create an npm-based project to contain our production code and test code.

First, create and access a folder:

so runnpm initialize -yto create a project. As a result, you should have apackage.jsonFile in your folder with this content:

Now create a file called index.js and paste the following content into it:

The code above contains a function that solves the famous interview question from the programmer FizzBuzz.

3. Add Jest to the project

You will now add Jest as a developer dependency to the project. Run the following command:

then go to yourpackage.jsonfile and change this part:

What is more:

4. Write your first test

Now create a new file called index.test.js. Paste the following content:

We'll explain Jest's syntax in more detail later. For now, please understand that we are reviewing:

• passing an array of 3 should return "fizz".
• an array of 5 should return "totals".
• an array of 15 should return "fizzbuzz".
• Passing an array of 1, 2, and 3 should return "1, 2, fizz".

5. Take your first test

Now you can run your first test. Go back to your terminal, just runnpm-test. You should see output like the following:

As you can see, all four tests passed. Alltest suitesthey were executed, which makes sense since we only have one. The total running time was 0.616 seconds.

Now that you've tried Jest, let's take a step back and understand the syntax and vocabulary better.

there is vocabulary

Let's take a look at two of the most commonly used Jest terms, which are also used in other testing tools:make funYspy.

There is vocabulary: simulacrum

In the Jest documentation, we find the following description for a Jest mock: "Mock functions make it easy to test the links between your code, removing the actual implementation of a function and the calls to the function (and the calls to the passed parameters) .)).”

Also, we can use a mock to return what we want to return. This is very useful for testing all routes in our logic, as we can control whether a function returns a correct value, an incorrect value, or even generates an error.

In summary, a simulation can be created by assigning the following code snippet to a function or dependency:

Here is an example of a simple mock where we just check if a mock was invoked. we mockmodeland call him. After that, we check if the mock was called:

The following example also simulates a return value to validate specific business logic. we mock themreturns truefunction and make it return false:

Next, let's explore what a spy is.

There is vocabulary: spy

A spy behaves slightly differently, but is still comparable to a drill. Again, we read in the official docs: "Create a mock function similar toes.fn()but also track callsobject[method name]. Returns a mock joke function."

This means the function will work normally; however, all calls will be traced. This allows you to verify that a function has been called the correct number of times and contains the correct input parameters.

Below is an example where we want to check if thegamemethod of aVideoreturns the correct result, but is also called with the correct parameters. we spy themgamemethod ofVideoObject.

We name them belowgameand verify that the spy was invoked and that the returned result is correct. Very easy! In the end, we have to name them.simulacroRestaurarMethod to revert a simulation to its original implementation.

Okay, now that we know the two most commonly used technical terms, let's dive into the basic structure.

there are basic

Let's take a look at some basics of writing tests with Jest.

Joke Basics: Describing Blocks

A description block is used to organize test cases into logical test groups. For example, we want to group all tests for a specific class. We can also nest new description blocks inside an existing description block.

To continue the example, you can add a description block that encapsulates all the tests for a specific function in that class.

Joke Basics: "It" or "Proof" Proofs

We continue to usetrialKeyword to start a new test case definition. HeESkeyword is an alias for thetrialKeyword. I personally like to useES, allowing for a more natural language flow when writing tests. To give an example:

There are the basics: matchmakers

Next, let's look at the matchmakers that Jest discovers. A comparator is used to construct assertions in combination withhopeKeyword. We want to compare our test result to a value we expect from the function.

Let's look again at a simple example where we want to check whether an instance of a class is the correct class we expect. We put the test value in thehopekeyword and call the exposed comparison functiontoBeInstanceOf(<Classe>)to compare the values. The test returns the following code:

For the complete list of exposed matches, see theThere is an API reference.

Basics of jokes: setup and teardown

It is important that we understand how to prepare and clean a test. For example, a certain test is based on a simulated database. We don't want to call a function to set up and clean up the mock database for every test.

To solve this problem, we can use theI likeYafter everyFunctions to avoid code duplication. Both functions allow you to run logic before or after each test.

Here is an example of how a database is simulated before each test and closed after each test completes.

In addition, you can also make use ofabove allYfinallyfunctions Both functions are executed either before or after every test, but only once. You can use these functions to create a new database connection object and destroy it when you're done testing.

Finally, let's take a look at the snapshot test.

Jest Basics: Testing Snapshots for React Frontends

Finally, the Jest documentation suggests using snapshot tests to detect UI changes. As I mentioned, snapshot probes can also be applied to check larger objects or even the JSON response to API endpoints.

Let's look at a React example where we simply want to create a snapshot for a link object. The snapshot itself is saved with the tests and needs to be committed along with code changes.

The above code displays the following snapshot:

If the link object changes, this test will fail in the future. If changes toUser Interface Elementsare correct, you must update the snapshots by saving the results to the snapshot file. You can automatically update snapshots with the Jest CLI tool by adding a "-u" flag when running your tests.

Introduction to Jest Tests

Finally, we've covered all the basics to get you started testing Jest. When you write your first test cases, writing can feel a bit awkward.zombado. However, the exercises are particularly useful inunit testsbecause they allow you to test your function's business logic without worrying about its dependencies.

If you want to learn more about Jest tests, I recommend reading thisGuide to Unit Testing with Jest. I would also like to refer to thoseprank cheat sheet. Now go ahead and start the prank test!

This post was written by Michiel Mulders. miguelHe is a passionate blockchain developer who loves writing technical content. He also enjoys learning about marketing, UX psychology, and entrepreneurship. When she's not writing, she's probably having a Belgian beer!