All language subtitles for 010 Testing Connected Components_en

Now let's continue writing tests

and let's now explore how multiple components can interact

with each other and how we can test that

and how we can work with props and tests.

And for this, I'll stick to this

very simple component I have here.

And what I want to do here

is now I want to create a new component,

the output component

which does what the name implies.

It just outputs something.

So this will be a quite straightforward component.

And of course I'm keeping it deliberately simple

so that we can explore these basic testing concepts

with basic examples.

And the idea of this output component therefore

is just to render a paragraph,

which outputs props.children

or props.text, depending on how you want to do that.

And here I'll say props.children.

And of course, this is kind of a redundant component

but if we could have some extra styles on this paragraph

and then use this as kind of a wrapper component

as we also sometimes did it in this course

for example, with that card component

which we had in some projects,

if you remember that.

So that's the output component and it does use props.

Now here, I got this greeting component

and instead of rendering this paragraph here

I now want to render my output component.

And let's see how that could work.

For this in this greeting component file

I'll import output from dot slash output.

And now we can replace paragraph with output

like this

and like that here.

Now, if I save everything

the nice thing which we'll notice

is that the tests simply continue to work.

So that's the good thing about render

which we use to render the greeting component.

It really renders this entire component tree

that is required here.

So it renders not just greeting

and ignores other components used in that JSX code

but it renders the content of those components

like in this case, the output component as well.

And technically we could therefore call this

an integration test because now more than one unit,

more than one component is involved.

But especially when dealing with such a wrapper component

which doesn't have its own logic,

that's of course not really the right term.

Testing the conjunction of these two components together

is absolutely fine.

And that's why I wanted to show this here.

This is not something that forces you

to split your tests necessarily.

You might want to split them

if the output component becomes more complex

and also starts managing state,

then you might want to test that separately

from the core logic of the greeting component.

But since that is not the case here

we definitely can keep the tests we have here

in greeting test JS to keep testing as we did before.