Over the last lectures we learned how to write basic tests, I'll show with some other tests,
no worries
but how can you actually write tests on your own,
how do you know that there is a find method on the wrapper,
how do you know what the it method does in detail if I wouldn't have told you?
Well the official documentation helps you with that and for testing, I can only recommend looking into
the official docs as well as if you really want to dive deeper into testing, as well as checking out
some dedicated resources, some dedicated courses or tutorial articles I mean with that.
Let's have a look at the documentations, here
I want the jest documentation and you can simply find that by googling for jest, there you'll find the
Getting Started Guide and always keep in mind jest is not bound to react or create react app,
it's a javascript test runner,
you can use it in any javascript project.
So on this page, you'll find some general ideas about how it works and how you configure it
and then the API reference is especially useful if you click on the expect method.
There you'll learn how to actually use the expect method and which functions to chain to it, like toHaveLength
which we already used here,
you will find a detailed instruction and examples and a similar documentation is available for all
the utility methods here,
so that's a great way to find that function
you need to test your code. You also find more about how to mock certain things,
mock means replace,
that's especially useful when working with some async code where you don't want to execute that actual
code,
you don't want to reach out to the web,
you want to mock this, you want to step in and replace that function with a function that just returns
some demo data
you could work with because you're always not testing a service but you're testing what your code does
with the returned data.
So that's the jest documentation,
now there's a similar one for enzyme, here
you will also find installations about how to install it with different react versions, then the general
guide on how to use it with various test runners in case you don't want to use jest and the API reference,
there you'll find the shallow rendering
I already showed you and two alternatives.
You can always dive into it, full rendering is useful if you want render the complete component tree, that should
rarely be the case
but you might have some circumstances where you want to test some cross component dependency, always
see if you can solve it with a unit test first though.
Now we use shallow rendering thus far
so let's click into shallow rendering and there on the left side, you find all the helper methods you
have,
we for example used the find method, if you click on it you'll always find examples and explanation
and there you see exactly what we used, a wrapper which renders something with shallow and then find to
look into it
and here the toHaveLength looks different because they assume a different validation library
not jest
but that of course is the part which depends on your validation library,
the part on the wrapper is what's connected to enzyme.
So this is the documentation
and as I already said, I can only encourage you to look into it.
So with that, let's look into it and let's check the contains method because I want to write one other test before
we leave our navigation items component.
There, we already test for a lot of things regarding the navigation items,
now I want to test something very specific. If we have a look at that file,
we notice that there is a logout component which is only there if we are authenticated, which
makes sense it should only be there if we are authenticated.
So I want to check if that specific navigation item is there
and for that I can use this contains helper because the contains helper, unlike find does not take an element
type or a css selector to be precise, there as you can see for find,
you could also use class selectors but contains takes a real node and you can therefore check if you
have a exact match.
So let's write one more test, I'll copy my wrapper from before
because I again want to test if we're authenticated, now I'll get rid of my previous code
and now here I want to use the contains method on my wrapper component.
Now in there, I want to check for the existence of one specific node,
now since we don't use a selector, I'll use jsx code again for my navigation item and the navigation
item I'm looking for is actually not a self-closing one but one which has the opening and closing selector
because in between, there will be a logout text and the navigation item will have a prop link which
leads to /logout
so I'm basically writing exactly the same code as my navigation item component here. And with that, I'm
checking if that is really part of the wrapper,
now here I could write toHaveLength(1) to see if only one is there or to mix it up,
I can check if this is two equal true,
so I want to find it if we are authenticated. Now with that,
let's save this and we get a failed test here,
do you know why the third test failed?
Because I deleted wrapper.setProps and I did this on purpose,
I wanted to show you that
each test runs independent of the others because we call beforeEach,
so we rendered a wrapper anew before every test.
So if this test also assumes authentication, then we have to repeat wrapper.setProps in there.
Now with that, the test succeeds
so now we see two things,
each test runs independent of the other
and the key point of this lecture, we can use a different method from enzyme to test for different things
combined with a new method from jest. And now it's of course also up to you to play around with the
different methods and write clever tests, some hints regarding this in the next lecture.