Writing Our First Tests with Jest

Rewrite tests with Jest that were written in the last lesson. We’ll use the online code editor CodeSandbox.

We'll cover the following

Writing a happy path test

We will see the isEmail function we worked with in the last lesson in an isEmail.js file.

export function isEmail(email) {
  const regex = new RegExp(/^[^@\s]+@[^@\s.]+\.[^@.\s]+$/);
  return regex.test(email);
}

We will write our tests in the isEmail.test.js file, in the src folder.

Note: By default, Jest looks for tests in files with names that end with .test.js or .spec.js or any named .js file in a __tests__ folder.

We will start by importing the isEmail function we want to test. Add the following import statement inside isEmail.test.js:

import { isEmail } from "./isEmail";

We’ll begin our first test by adding the following code:

test("Should return true when valid email", () => {});

The test function from Jest allows us to define a test. The first parameter is the name of the test and the second parameter is a function that will do the actual test. Add a call to isEmail inside the test, passing in a valid email:

test("Should return true when valid email", () => {
  const result = isEmail("bill@somewhere.com");
});

Complete the test by verifying the value of the result is true:

test("Should return true when valid email", () => {
  const result = isEmail("bill@somewhere.com");
  expect(result).toBe(true);
});

We use the expect function from Jest to verify the result. We pass the value we want to verify into expect.

The expect function returns an object containing lots of methods we can use to define specific expectations for the value we are checking. These methods are called “matchers,” and we are using a matcher called toBe in this test. The toBe matcher can be used to check the value of a primitive value. We have a whole category of lessons where we’ll learn about matchers later in this course

To run the test, click on the “Tests” tab in the right-hand panel and click the triangle icon, which has a “Run all tests” tooltip. The test should pass:

export function isEmail(email) {
  const regex = new RegExp(/^[^@\s]+@[^@\s.]+\.[^@.\s]+$/);
  return regex.test(email);
}
Passing tests

Congratulations on writing your first Jest test!

Writing an unhappy path test

Try to implement the second test yourself. Remember, the test should verify that the function correctly identifies an invalid email address.

Run both tests to make sure they both pass.

Introducing a bug

Change the implementation of isEmail to the following:

export function isEmail(email) {
  const regex = new RegExp(/^[^@\s]+[^@\s.]+\.[^@.\s]+$/);
  return regex.test(email);
}

Rerun the tests. We will see that the valid email test no longer passes:

export function isEmail(email) {
  const regex = new RegExp(/^[^@\s]+[^@\s.]+\.[^@.\s]+$/);
  return regex.test(email);
}
Failing tests

Notice that Jest informs us which test has failed. It tells us what value was expected and the actual value that was received. It even tells us the line of test code where the failure was raised. This feature is super convenient during development!

Wrap up

Jest test files are identified by having .test.js at the end.

Jest’s test function is used to implement tests.

Jest’s expect function and a comprehensive set of matchers allow us to define the expectation for the result of a test efficiently.

When a Jest test fails, it provides us with detailed information to quickly pin the problem down.