- In this section, we're going to see how to start testing
a React application.
We're gonna test an application
that was generated using the Create React App tool.
So as you can see here,
I've created an application called demo app,
and it's going to be in type script.
So the application already exists,
and we can have a look at it in example four.
So let's have a quick look at the application
before we see the tests.
Okay. So here it is.
In the example four folder,
it's the same application as we've been looking at earlier.
So it has a public folder, with an index HTML.
And the index HTML has a div here,
into which our React content will be rendered.
By the way, I've already done an NPM install.
So the node lie (indistinct) have been installed there.
So that's important, obviously.
And then in the source folder,
there are various files here
that we're going to take a look at.
I'm gonna concentrate on, in particular,
the app test TX.
That was actually generated automatically for me
by the Create React App tool,
as a good starting point.
So what we're going to look at is the code
that's actually generated by default,
before we start embellishing.
I'm also gonna have a look at package dot json
because we need to think about what libraries are involved
in all this testing business.
Okay.
So first of all, in this package dot json,
the Create React App tool generates this file,
and it downloads these libraries.
So there are several testing libraries, here.
As you can see, we have jest-dom.
Jest-dom is a wrapper over the testing library
to make it easier for us to verify the content of elements.
So it has matches that allow us to say,
does this element have this HTML content?
Does our element have a certain CSS style?
Does our element have the keyboard focus?
So it's a high-level set of matches
which allow us to check the content
in our React application.
There's also a library we haven't seen before.
Testing-library/react.
That has some react specific extensions
on top of testing-library.
We'll have a look at that in more detail in the next lesson.
And then also testing-library/user-event.
We've seen that before.
This enables us to, or makes it easier,
for us to emulate user events.
So using the user event library, we can say,
take this button and simulate the user click in it,
so that we can test the event handler.
And also, because we are using type script,
type script is quite fussy.
It needs to know what data types everything are.
So there are,
there's the need for additional interface definitions,
an enum to keep type script happy.
And that's what's defined in this library.
It's a set of type definitions,
type script, type definitions for the jest library,
so that when type script compiler sees our code, it's happy.
Okay.
There's also a script section
in package dot json to run our tests.
Okay. So we can say Yarn or NPM.
We can run this script,
and it's just a shorthand to running React scripts test.
You can either say, you can either run this script,
or you can run this script.
They're kind of euphemisms for each other.
In case all of that is in the package json file,
let's just take a quick look.
So here is my package json file.
And as you can see, it has the testing dependencies
that I just talked about, including the type definitions.
And then it has a start script.
So it has a test script which helps us to test our code.
So good so far.
Right.
So the jest-dom package, as I mentioned,
it contains Jest matchers, makes it easier
for us to verify the content and our downloads.
So we can say, find an element
and expect it to have some high level DOM test.
Does it have this tech text content inside the element?
Okay. And then jest-dom, the jest-dom library.
This is imported into our tests.
We have a standard import in our source setup test folder.
It imports this library everywhere.
Okay. So that means that we have access.
Any of our tests have access to the jest-dom library.
So we can use functions like this, anywhere in our code.
All right.
So let's have a look at how
to actually write tests in React.
It's commonplace to have a separate test file per component.
So in our application,
because it's such a simple application, at the moment,
it has a single component app TSX
and generated for us by the Create React app tool,
is a correspondent test file app dot test dot TSX.
That's the naming convention that we follow.
So we'll have a look at the tests in app test TSX.
So remember this, what we're gonna look at here is the code
that was actually generated for us automatically
by the tool.
Okay. So just to confirm, there's my actual component.
The component renders some HTML,
it's relatively simple HTML.
Notice, in particular,
because we're gonna test this in a moment.
Notice that the HTML, in the HTML, amongst other things,
there's a hyperlink,
hyperlink with some certain attributes,
and a Learn React text.
Okay.
So bear that in mind, because in a moment,
we're gonna see a test that verifies this element exists.
The test is here.
Okay. So it's quite straightforward.
Let's take a look at the code that we have in here.
First of all, there's a render function.
The render function is provided by test and library React.
Okay.
And what it does is it renders,
it's a bit like the React DOM render function.
When you, in a real application,
when you say React DOM render,
it renders a component onto the browser.
But when you call the render function here,
the render function,
it renders a component into a virtual webpage.
And that virtual webpage is provided by screen.
Okay, well, it's actually provided by JS DOM,
but the the render function is going
to render this component.
In other words, as if it was a real webpage,
but it won't render it on a webpage.
It'll render it into a virtual webpage.
And the screen object gives us access
to the document body in that virtual webpage.
So that's great, isn't it?
The render function will rent the content
into a virtual webpage.
The screen object gives us access to that virtual webpage,
in particular, to the body part of it.
So we can say, in the body of my virtual webpage,
does it, somewhere, have an element that contains this text?
Remember JS DOM?
With JS DOM, you have a high level functions.
You don't search for elements by ID,
you search for elements to have a text content
as the user would see.
Find an element that has this display text, learn react.
Well, that should be the hyperlink.
Hopefully, that will give us back the hyperlink.
So let's verify that the hyperlink is in the document.
Okay.
So let's verify that in the document somewhere,
it contains an element that has that text.
So hopefully, in my application component,
it's this hyperlink here that has that text.
It's this hyperlink that we've just gotten
and tested for to see that it exists.
So you call the render function to render the content.
You call the, you use the screen object
to access the content that has been rendered.
So you can check that it's correct.
All we need to do now is to see
how to actually run the test.
So you can just say Yarn test, or you can say NPM test,
or you can run the React test manually.
And this is what it displays.
It displays kind of like a menu of options.
So you can see 'em in the right folder here.
You can run the a option to run all tests.
And if you do that, then it runs all the tests,
and they pass.
I'm gonna actually do that interactively,
so you can see what it actually looks like when you do it.
So here's a command window.
I've opened the command window in the correct location,
and correct folder.
So I can just say, as here,
you can just say Yarn test.
Yarn test.
So it's equivalent to just running React scripts test.
And it'll locate.
Basically what it does by default,
is it locates all the files that have test file name,
like app test TSX.
It'll find all those files.
If I run the a option.
A.
It ran all the tests.
I wouldn't got one test and it worked.
It will work.
Seems to be thinking whether it's working clearly,
it's such a complicated test.
It's contemplating whether it's gonna work or not.
That will work eventually.
And then it'll display another option to say,
what do you wanna do next?
So if I press w, I get an option again here to say,
maybe I want to run the tests that failed
or other options as well.
I'm gonna quit now because we're done.