Instructor: In the last section,
we spoke about the purpose of the it function.
So we've now provided it a description right here.
And then in the body of this function,
we're going to write out the actual test logic
that proves that our app component shows a comment box.
So to write the actual test logic inside of here,
we're gonna write out some code that looks very similar,
almost identical.
Well, actually, it is identical to some of the code
that we saw earlier when we first generated our project.
So we're just gonna write that code out
and then we'll talk about exactly what it's doing.
So inside of the it function,
I'll write out const div = document.create div.
Then underneath that, we'll write out ReactDOM.render.
I'll pass in an instance of our app component like so.
And then as a second argument, I'll pass in the div.
And then finally on the third line down here,
I'll say ReactDOM.unmountComponentAtNode.
And I'll pass in the same div like so.
So three lines of code.
At present,
these three lines of code will somewhat test our component,
but they don't actually kind of really say
that the component is doing any distinct behavior.
All that's happening right now
is we're gonna try to render our app component.
And that's pretty much it.
Nothing else really happens.
And so if we ran this test as it stands right now,
this test would really just prove
that our app component does not crash
or does not throw an error when we try to render it.
Now, that's definitely useful,
but it doesn't really meet the goal of the test,
which is to somehow prove that the app component
shows a comment box inside of it.
Now, before we move forward and modify this code at all,
let's dive into these three lines right here
and get a better idea of what's going on.
So I'm gonna pull up a diagram.
Here we go.
So as we've said several times now,
anytime you and I run our tests,
we're gonna flip on over to our command line
and execute the npm-run-test command.
When we run that command, it starts up jest,
which is our automated test runner.
So the important thing here to understand
is that when we run jest,
it's being executed inside of our command line environment.
It's being ran from the terminal.
The issue with that is that when we try to run React
in any way, shape, or form,
React always expects
that it's being executed inside the browser.
The React library itself only functions correctly
if it's being executed inside the browser.
And so you can kind of very quickly realize that the browser
and the command line environment are not the same thing,
but we want to somehow run our React code nonetheless.
So to solve this issue,
to solve the fact that React expects
to be executed inside the browser,
but we are running jest from the command line,
Create React App automatically installed a dependency
into our project when we first generated it.
That dependency is called JSDOM.
The JSDOM library is kind of a code implementation
or a JavaScript code implementation
of how the browser works.
So you can kind of imagine that JSDOM right here
kind of fakes out the existence of the browser
and fools or tricks the React library into thinking
that there is in fact a browser that React is working with.
So when you and I,
right here on this line of code
or this little segment of code right here,
start making reference to something called document
or when we try to create a div element,
we're not actually creating a div inside of a browser.
There's no div inside of a browser,
there's no Chrome here, there's no Firefox,
no Internet Explorer.
Instead, when this code is executed from our terminal,
we make use automatically of the JSDOM library
to create a fake div.
So this div right here, not a real div.
It's a fake div that exists
solely inside of memory inside the terminal,
and it does not exist inside of any browser.
But that's good enough to fool out React
and make it think that it's actually
working directly inside of a browser.
So that kinda gives you a better idea
of what's going on behind the scenes here
when we start calling things like document.
Remember, document is traditionally an object
that exists solely inside the browser.
This document object right here
is automatically furnished for us by JSDOM.
That's where it's coming from.
So now that you have that in mind,
I wanna give you a second diagram
that's gonna give you a better idea
of what's going on with the overall snippet right here.
So here's pretty much what's going on.
With that little chunk of code,
we are telling the library, JSDOM,
to create a new div element.
So this is an element that exists solely in memory
and is not tied to any browser instance
or anything like that.
We then attempt to take our app component instance
and render it into this div right here,
this kind of div that's floating in space
solely inside of our terminal.
So behind the scenes,
React is going to take our app component,
it's gonna take the HTML that is produced by that component,
it's gonna take that HTML
and stick it into that div element.
So after this line of code right here
where we go through that process right down here,
we then have the ability
to write out some additional amount of code
that inspects that div element
and figure out exactly what's going on inside of it.
So right here,
you and I could possibly write out some code
that maybe looks inside the div
and checks to see if the comment box is in there.
So that div is gonna contain all the HTML
that was produced by the app component.
And so in theory,
hopefully gonna contain the HTML
that belongs to the comment box as well.
So that's why right here is a perfect place
to write one more line of code
that's gonna look inside that div
and check to see if the comment box actually exists.
So we'll write out that code in just a moment,
but before we do,
I want to mention the last line of code right here.
So on this line of code,
I bet you can read this function name
and get a good idea of what's going on.
This function is gonna look at the div,
it's gonna find the app component
that we just rendered into it,
and it's going to remove that app component entirely.
So this right here is a step
that we refer to as cleanup after our test run.
You see, anytime we start running tests,
anytime we start running dozens,
or hundreds, or even thousands of tests,
we start getting a little bit concerned
about the performance of our tests.
So many times after running some testing code,
we'll do a little bit of cleanup,
or we'll kind of destroy any leftover objects,
or unmount any components
that we had created during the test.
And that's exactly what's happening right here.
If we do not call this function right here
in attempt to clean up the div
or the component inside that div,
then the component will just sit around forever
as long as our test suite is running.
And over time,
that's gonna take up some amount of memory
and it's going to cause our entire test suite
to run more and more slowly,
which is obviously not ideal.
Throughout this course,
I'm gonna make sure I pay special attention
and tell you directly,
very clearly whenever we are writing some cleanup code
so that you start to develop a sense
of when we need to clean something up
and when we can kind of just throw it away
and not worry about it.
So now that we've kind of pulled this chunk
of code right here apart in great detail,
let's take a quick pause.
And when we come back to the next section,
we will start to add another line of code
that's gonna look inside that div
and see if the comment box is there.
So quick break and I'll see you in just a minute.