So in the last lecture we wrote our first test, that's of course nice,
let's now write another test for the same component for now.
So I'll copy this it function and inside the described function, I'll just paste it in there,
now what else could we test?
Well of course we could obviously test the opposite,
we want to have three navigation items if we are authenticated, so for this we simply need to pass the
isAuthenticated prop and adjust our test. So we should render three navigation elements if authenticated
not if not, but if authenticated.
Now for that, we need to change the component we render,
it's no longer navigation items but navigation items with a property isAuthenticated and passing it
like this will automatically pass it as true, then we expect to find navigation items but we expect to
find three of them
and that's all. With npm tests still running,
all you have to do is save this and now you should see that
two tests passed.
Now of course we can write multiple tests like this
but if we constantly do the same at the beginning of the test namely we rendered a wrapper even though
the props changed but we can do this differently too,
so if we constantly do the same, there is a helper method we can use inside the described function here.
It's the beforeEach function, as the name suggests, this is a function which will automatically be executed
but for each of your tests, you also have an afterEach function for cleanup
after all your tests if you need do. So here it's beforeEach and then beforeEach, we can do some general
set up of course, beforeEach takes a function as an argument
and this is the function which will get executed before each test.
So with that what I'll do is I'll create a variable wrapper with the let keyword
and then in the beforeEach, I want to render this component with the shallow function and store it in this
wrapper variable.
Now since all it functions are executed in this outer describe function, the wrapper variable is available
in all of them
so all we have to do is get rid of the const keyword, like this
and we now have access to the wrapper.
Now with that if we save this, it should re-execute everything
and now, we of course have a failed test.
We can now look at it, the test which should render three navigation item elements if autheticated fails
and it makes sense that it does because we never are authenticated, we only render the wrapper
once here and we don't pass isAuthenticated to it
so we are unauthenticated,
this test of course uses the same wrapper and hence fails.
Now what we can do here is two things,
the first is that we can of course use the wrapper and set it equal to shallow with navigation items
here and pass isAuthenticated as we did before, if we save this, both tests succeed.
That is one option but we can also use another helpful method of the enzyme package, we can access the
wrapper
and then there is a set props method we can execute on that wrapper,
so on anything which stores a shallowy or other rendered react element. And to set props, we simply
pass a javascript object with key value pairs where the keys are the prop names and the values,
well the values of the props
so here we could set isAuthenticated to true now.
And now if we save, the second test also still passes
now with the more elegant set props helper method from the enzyme package. This is how you can write
multiple tests and have them to work together nicely.