Instructor: In the last section we got our comment box
and our comment list components inside of our App.js file.
Now we're gonna move on to the fun part
which is to create a test file
and write some tests around this app.
Now, in the past we spoke about how
Jest loads up test files.
When we were looking at this diagram right here, we had said
that anytime we start Jest, it's gonna find any file inside
of our project ending in .test.js.
So you might think that's all we have to do to
get started writing a test around our component right here
is to create a file ending in .test.js.
Well, in reality
we get a little bit more decision making capacity than that.
You see, Jest ends up being very flexible
in deciding exactly what test files it's going to
load when it first gets started.
So in this diagram right here, I've placed
in green boxes all the different valid spec file,
or test file names
that we could possibly use inside of our project right now.
So these are all a hundred percent valid.
So I'm inside the components directory.
Here's our App.js file that we just made.
We could create a file called App.spec App.test.
We could also make a new directory
inside this same folder called __test__
and then create any file inside there.
So we have a tremendous amount of flexibility
in deciding exactly where we want to place this test file.
Now in this course we're going to follow the kinda decision
or the nomenclature
of creating a __test directory.
So anytime you and I want to write a test around a file
we'll create a folder in that same directory
called __test__ and then we'll place all of our test
files inside there.
Personally I find that this leads
to a very good degree of organization
and it makes it really clear when you're looking
at a test file versus an actual implementation file.
So for our first component of App.js
we'll make a new folder inside of our components directory.
I'm gonna call that folder __.
So notice there's two underscores here, two separate ones
tests__, like so.
And then inside that directory
we're gonna make our actual test file
which we will call app.test.js.
Now, just to be a hundred percent clear
this file right here, we could have left
off that .test.js. That is not required at all.
We could have left it just like this right here
but now we have two files inside of our project
that are called app.js.
And for me personally, I think that's really unclear.
So I really like to tack on the .test.js just
because it adds more clarity to what's going on.
So I'll do .test.js like so.
Okay, so now inside of here we can start to write
out our test logic.
To get started, we'll first import React and React Dom
and our component at the top of the file.
So I'll write out import React from React
I'll get React dom from React dom
and we'll pull in our app component as well.
So app from up one directory
cuz now we're inside of the test directory.
So we need to go up one directory
and then get that app file like so.
Okay, so that's a good place to get started.
Let's take a quick pause.
We're gonna come back to the next section
and we'll start writing out the main body
of our test suite inside this file.