All language subtitles for 007 Writing Our First Test_en

To dive a bit deeper

let's create a new component.

In the Components folder which I also created now.

And here all create a rather straightforward

dummy component, which I'll name, Greeting.js.

So that's the file name.

And then there I'll create my component function, greeting,

which I'll export here

and in there I'll just return a div with a h2 tag

where I say, "Hello World!"

And below that a paragraph where I say,

"It's good to see you."

So of course, just a dummy component

with some static output here.

No state, no props, nothing fancy for the moment.

Now this greeting component of course

can be used in App.js now, and therefore here

instead of that logo, I'll import greeting

from ./components/Greeting,

and then here, instead of rendering that header

and all that stuff, I'll get rid of that,

and I'll instead render greeting, that component.

This of course implies that our test

in App.test.js will now fail

because we won't find any element

with a text of learn React anymore.

But that's fine because that was just

the starting code anyways

and it's not the code I want here.

Instead for the moment,

I'll comment out this test here

because I don't need a tested App.test.js anymore.

Instead, I wanna now write my own first test

for this custom component we added here,

the greeting component.

And we could write that test an App.test.js

and render the greeting component from there

or render the app component

but the convention is to write this test

as close as possible to the thing you want to test.

So if I wanna test the greeting component,

and for example, test that it's rendering the correct text,

then we should create a separate Greeting.test.js file

and write our test in there.

Now, any here, we write a test by using this test function,

which is globally available.

You don't need to import it,

it's available like this.

And then as we saw, we give this test a description.

Now the text here is up to you, but generally

you wanna briefly describe what your tests does.

And here I wanna test whether we have the hello world

text on the screen.

So of course that's quite similar to what we tested

in App.test.js before, but we will get more fancy later.

So here I'll just say, "renders Hello World as a text."

Then we need to add a second argument to this test function,

which is an anonymous function,

which will contain the actual testing code.

Now in here, we typically wanna do three things

when we write a test.

We wanna write a test by using the three A's.

The first A stands for arrange.

We wanna set up our tests.

For example, we wanna render the component

which we wanna test.

We can also do additional setup work if it's required.

Then we wanna act.

So we wanna do the thing, which we wanna actually test.

For example, if we wanna simulate a button click,

we want to do that as a second step.

It's not something we do here

but it is something that you often will do in some tests,

and it is something which we also will do later.

Last but not least,

we want to assert the results.

So we wanna have a look at the output

that's visible in the browser, for example

and then see if that matches our expectations.

So these are our three A's.

Translated to this test, if we want to arrange,

we wanna render greeting component.

And a for that, just as an App.js,

just as an App.test.js, we wanna import the component

that we do want to test.

So I will import greeting from the sibling Greeting.js file.

And then we can call render,

which you need to import from testing-libraries/react

and you then render your component.

And to be precise here, you pass JSX code.

So you create your component elements, so to say.

That's the arranged part.

Now we could do more here if more is required,

but here, that's all we need.

Then we want to act.

We want to perform the main action that's interesting to us.

And here that's basically nothing.

Last but not least,

we wanna assert and for that, I wanna look

into that virtual Dom, if you want to call it like this,

so that rendered component content.

And since I want to test whether hello world

is rendered as a text,

I want to select an element by that text.

And if we find such an element

we know that the test succeeded.

If we don't find it, we know that the test failed.

For this, we can import screen,

which gives us access to this,

a virtual screen to this virtual Dom, which was rendered

if you want to call it like that

and we can use that screen to then find elements

on that screen.

Now for this, you've got various functions available.

You've get functions, find functions and query functions.

The main difference is when these functions throw errors

and if they return a promise or not.

Get functions, will for example, throw an error

if an element is not found,

query functions won't do that

and find functions will return a promise.

So there it's enough if an element is eventually

on the screen.

Here, I will get an element by text.

So we'll use screen get by text.

And then here we need to define the texts

for which we're looking.

Now, here, we can use a regular expression

as it was the case in App.test.js,

but you can also just, hard-code a string.

It's just a little bit less flexible

than a regular expression.

But if you are looking for a full string

as I'm doing it here, then it's absolutely fine.

You can also pass a second argument here

to get by text and configure if you want an exact match,

which is the default or not.

If you say false here, casing won't matter for example,

and it will also match sub-strings.

Now here, an exact match is okay though,

and since that's the default

we don't need to do anything else.

Now get by text will hopefully return an element.

If it doesn't find an element, it will throw an error.

And therefore here I'll then get my hello world element.

And now we can make the actual assertion.

We can check whether that element exists.

For this we got the globally available expect function

to which we can pass our testing result value

and that can be anything, a number, a string

or like in this case, a Dom node in the end, a HTML element.

And then on this result of this expect function,

we've got various matrix,

like this to be in the document function

which checks whether the thing we expect here,

the HTML element we expect here is in the document.

You can also check for opposites

by adding dot not and then your matching functions

like not to be in the document.

If you want this element not to be in the document

though, in that case you would have to use

the query by a text function,

since get by text would fail if no element would be found.

But that's not what I wanna check here.

Anyways, I just wanna check if this is in the document.

So basically the same test as we had it, an App.test.js

and that's now our first dummy test.

If we now run NPM test again,

this will start up the testing again

and now it also does run all these tests out of the box

and you see that we got two tests

and actually both failed.

Now, App.test.js failed because as we see here,

we must at least have one test,

and that's an empty file right now.

So therefore, to avoid this error,

I will delete App.test.js.

Now it re-runs, but the other test here also fails

because it's unable to find an element

with that text, hello world.

And the reason for that

is that here I have an exclamation mark.

And I did mention that it looks for an exact match here

out of the box.

So we either add exact false here

to be a bit more forgiving,

in which case does test now passes as you see,

or we look for the exact match

by adding the exclamation mark here,

in which case it also passes.

But this is now how we can write our own first test

even though it's basically the same as before

but we learn how we can generally write our tests

and with that knowledge, we can now dive a bit deeper.