- [Instructor] One of the most important tests
to conduct on a UI component
is to check that it contains the right elements.
These elements could be text nodes, buttons,
form elements and so on.
The login page you're currently looking at
is the home.view component we mounted in a previous video.
This page contains a background image of a couple
on the left-hand side,
the logo of the Explore California Toll Services company,
a login form with a title
and two fields to enter the login credentials
and finally the button to submit the login form.
Using Jest, we can test the components
to check if it contains any of these elements.
But how is this type of test useful?
Imagine a team member mistakenly
or maliciously deletes the password field
and goes ahead to push the code to the team's repository.
The test that checks for the presence of this field
can easily detect this omission and stop the code
from corrupting the application in production.
In this exercise,
we'll be testing for the presence of the form title.
The title reads Login to your account.
This test will fail if the title does not exist
and pass if it does.
Let's head back to our editor and write the test.
To follow along with this video,
you need the 03_02b branch of the project.
So make sure you are on the 02_02b branch.
Inside the mount.js file,
we have extracted the function getByText
from the rendered instance of the home.view component.
The getByText method allows us to assess an element
based on an exact match of its text component.
This function will throw an error causing the test to fail
if the search text cannot be found.
Let's go ahead and use this function
to search for the title of the login form.
Good.
Now save the file and let's run the test file.
Because our component contains the search text
in the login form title, our tests pass.
Now let's take a look at the case
where the text is incomplete.
Back in the editor,
let's remove the word account from the search string.
Now save the file and run the test once again.
This time, we'll get an error that shows
that an exact match of the search text cannot be found.
Jest also prints out the content of the component
on the screen for confirmation.
It might seem a little strict
that Jest searches for an exact match,
but when it comes to testing
being strict is highly encouraged.
Your tests are like your code gods and you must ensure
that you're not taking anything for granted.