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); }
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); }
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.