-: In the last section, we used create React app
to generate a new project that we're going to
use to learn more about testing.
In this section, we're going to open
up that new project that we just generated
and run our first test inside of it.
I'll first begin by changing
into the testing directory that we just created
and then I'm going to open up my code editor inside of here.
All right, so here's my editor
and when we first create a project using Create React app
we get a couple
of different files and folders automatically generated.
Inside the SRC directory are two files that you
and I are going to spend a pretty good amount
of time looking at, and that is the app dot js file
and the app dot test dot js file.
The app dot js file contains the root component
of this very basic React application
and so inside of here you'll find its render
method that contains just a little bit of jsx right here.
Now, to do a little demo of testing
we're gonna take all the jsx that's inside
of here right now and we're going to replace all
of it with the single div that just says hi there like so.
So I've got one single element that returns the text.
Hi there, that's it.
Nothing else inside of here.
I'm gonna save this file and then I'm going to go
over to that app dot test dot js file.
So here it is right here.
Inside this file is some amount
of code to test the component that we were just looking at.
At present.
All this code does is try to render that app component
and make sure that nothing crashes
or nothing goes wrong during that process.
We're gonna make a tiny change to this code right here
with this tiny change we're gonna make, we're gonna verify
that the app component contains the text hi there
that we just placed inside of it.
So that's going to be the sole purpose
of this first test that we're going to write.
To write that test
I'm gonna find the React om dot render line right here
and I'll create a new line of code right underneath it.
Then inside of here
I'm going to say Expect div inner html, and notice
that this is inner HTML with capital HTML right here.
And then I'll say dot two contain
and I'll pass in a string that is identical
to the text that we just entered
over here inside the app component.
So I'll pass in a string that says Hi there
completely identical to what we were just looking at.
I'll then save this file and then I'm gonna flip over
to the terminal and try to run this test file
that should be validating to make sure
that the app component is working the way we expect.
So I will change back over
to my terminal and then inside the testing directory
I'm going to execute the command NPM run test.
So when we first generate a project using Create React app
we automatically get a fully functional test setup right
out of the box ready to go.
So we do not have to install any additional libraries
any additional dependencies or do any additional setup.
We can just immediately start writing tests.
-: Now we'll talk a lot
about this setup that comes included or bundled
along with a Crate React app generated application, but
for right now, it's definitely a good place to get started.
Now after running NPM run test
we're gonna wait just a moment for the test to run
and then eventually we're gonna see a message that says
Yep, it looks like your component
or that app component is working the way you expect.
So in short
after we attempted to render that component inside
of a sort of test environment, we then check to make sure
that the component itself contains the text high there.
And because the test passed well
I feel reasonably confident that, yep
that component is working the way we expect.
All right, so that's our first test.
Just a very easy place to get started.
Let's take a quick pause right here
and we'll come back to the next section
and start talking about the test environment that we get
for free with Create React App.