Narrator: In the last section,
we installed our boilerplate package
and installed our dependencies for it as well.
Now this boilerplate package already has
an entire development server and tooling set up
with Webpack already set up for us.
Let's go ahead
and get that development server running
by just entering at the terminal
inside of our project directory, "npm run start."
So this is going to start up the dev server
on "localhost:8080."
In just a second, here we go.
Let's see, so "bundle is now VALID"
that means we're all good to go.
We can go check out the development server.
And so in my URL right here, I'm at "localhost:8080"
and I see the text very plainly, "React simple starter."
Let's go through the boilerplate package
and find out where that is defined.
So in my source directory, I'm going to go
into my components folder and then open up "app.js"
and you'll see I've got a div that I'm rendering
with "React simple starter."
So, nothing too crazy here,
just a simple "App" component
that returns a div with some text.
So again, I'm going to make the assertion here
that learning testing is a lot easier
when we just kind of dive into it first
and then kind of figure out all the rules
and all the kind of whatnot, all the different concepts
about testing over time.
So with that in mind, we're going to go ahead
and write our first test right now inside of this section.
Let's open up inside of our test directory,
components folder, "app_test."
Now you'll see that there's already a bunch of code in here.
I'm a big fan of never writing code
that you don't already understand what's going on.
So I'm going to highlight everything that's in here
and I'm just going to delete it.
Let's write all this stuff from scratch,
make sure we've got a good idea of what's going on first,
and then we'll go ahead
and worry about copy pasting code in the future.
Okay, so inside of this file right here,
you might be able to divine
from the name of the file, "app_test,"
that the purpose of this file
is to test solely the component app.
So right now we are creating a react component called "App"
and it has a div inside of it with the text,
"React simple starter."
So whenever we go to write some tests
we always ask ourselves, what is the behavior
in this component that I want to test?
What do I really care about this thing?
What do I want to make sure that
when another engineer comes into my component
or my application
and starts, you know, fiddling around with some stuff,
maybe they change the div to a "span"
or something like that.
What I really care about knowing that they're not breaking.
So for this very simple example right here,
for this very simple div,
I'm going to say the only thing that I really care about
is making sure that my component shows the text
"React simple starter."
That's all I really care about.
So we're going to write one test exactly one,
and it's just going to assert
that our component has the text
"React simple starter."
And we're going to write that test
inside of the test file
that corresponds to our app component,
which is "app_test."
Okay, so let's give this a go.
Now, as you might imagine, I've already done a lot of setup
inside of this testing repo, inside of specifically
this test helper file right here.
So we're going to import a couple of helpers
out of that that are going to make our life a lot easier.
But again, I want to stress here that we're going to go back
and rebuild that test helper file later on
so you know exactly what's going on inside of there as well.
So with that in mind, let's make use of that
test helper file.
We're going to import two helpers
off of that test helper file.
So at the very top, we'll import "renderComponent"
and "expect"
from up one directory, test helper.
Up one directory, "test_helper."
(keys clicking)
We're also going to import the component
that we want to test, which is app in this case.
So we're going to go up two directories into source,
into components, and then get app.
So we'll "import App from"
up two directories, into source, into "components,"
(keys clicking)
"app." Very good.
So now this is our "App" class right here,
our very simple react component,
and it's the thing that we actually want to test here.
That's what we want to make an assertion about.
We want to say this is behaving the way that I expect.
Let's go ahead and put down three simple keywords
in this file that are going to form the absolute backbone
or root of every test that we write in the future.
So these are the really important keywords
that we want to focus on right now.
I'm going to write out
"describe," "it," and "expect."
I'm just going to write them out,
nothing too crazy right here.
Let's go ahead and put
a little bit of comments in here
to describe kind of what we want to do
with each of these keywords
or what the purpose of each of them is.
So I'm going to put a comment down,
right above "describe," and I'm going to say
"Use describe to group together similar tests."
That's what "describe" does,
we "use describe to group together similar tests."
So in this case, since we're testing the "App" component,
I'm going to say that we are describing
something about "App."
And I'm just going to pass in "App" as a string here,
not the whole component,
just a string.
The string that we pass to "describe" right here,
the only purpose of it is for our report
when we run our tests.
So when the tests run and they execute,
and let's say they all pass or they all fail,
we're going to get a report back from our testing setup
and it's going to say
okay, all the tests inside of this "App" section passed
or maybe some failed.
And it's really just a tool to help you narrow down
what tests are doing what.
The string that we use here is nothing special.
We can put "App,"
we can put "App Component,"
we can put
"Test the App Component."
It doesn't matter.
It's just a string that we're going to use
to interpret the input
or the output that's coming from our report.
In practice, I love keeping our top level "describe" here,
just giving it the name of the component that we're testing.
So in this case, just very simply, "App." That's it.
Okay, so we've got a comment on "describe",
you know, we've kind of got a reasonable idea.
We use it "to group similar tests together."
Who knows how we use it
and we'll figure that out in a second.
But let's move on to the second structure here, "it."
I'm going to put another comment here
and we're going to say, "Use it,"
let's put these in quotes by the way,
there we go,
"to test a single attribute of a target."
So we use "it" to group one single test.
It says, I'm testing blah, blah, blah.
I'm testing something very specific.
We say, here is exactly what I'm testing about "App."
So in our case, we said for "App,"
all we really want to do is make sure
that it has the text "React simple starter"
inside of it, right?
All we really care about
is that it shows the text "React simple starter."
So inside of my "it," I'm going to add a string
that simply says "it('shows the correct text')."
Again, this string right here
is only used for the report
that gets generated when we run our tests.
It's not used to figure out what to run
or how to run it or anything like that.
It's solely direction to us, the developers,
on what this little block is going to test right here.
Okay, so still, you know we kind of have a reasonable idea
of what "it" might do,
still no idea how to actually use it in practice,
no problem. Let's go onto the last one,
"expect."
We'll figure out what's going on
with this "expect," we'll take a quick short break,
and then we'll come back and finish up
all of our specs here for our first component.
So "expect" is used.
"Use 'expect' to make an 'assertion' about a target."
And when I say "target" here,
I'm talking about a thing that we're testing,
we are inspecting this "App" component
when we render.
So the "App" component is kind of,
we kind of consider it to be our target of sorts.
The other kind of crazy word in here is "assertion."
And so when we use the word "assertion,"
we're saying I want to have a reasonable belief
that some very specific fact about my target is true.
So in this case, I might "expect"
that my component has the text "React simple starter"
or was it, yes, "React simple starter".
So we use "expect" to write that very fine-grained,
very simple, very direct assertion about our target.
Okay so again, these are the three very core units,
"describe," "it," and "expect" that we're going to use
throughout all of our tests.
Now, if you're already familiar with testing,
with say, Mocha or Jasmine or Jest,
anything like that out there,
you'll find that from testing framework to testing framework
they all carry these similar terms,
"describe," "it," and "expect",
sometimes "expect" might be should
or you know, slightly different syntax, not a big deal.
But the point is that we're making use of Mocha here.
But if you decide later on
that you want to use a different testing framework
like let's say Jasmine or Jest,
all of the topics that we're going to talk about here,
every last concept is going to carry over
to these other testing frameworks one for one.
Every single testing framework is set up in
roughly the same fashion and there's only a very small,
very slight differences between each of them.
So it's kind of a situation where you just learn one
and that knowledge tends to carry over
to other testing frameworks as well.
I just want to throw that in as a quick aside.
Okay, so let's go ahead and take a short break,
come back and we'll wrap our tests up here.