When working with Vue, we often also use its state management companion, Vuex. Testing Vue components with Vuex integrated is sometimes the right way to test the component. Putting various technologies together is often referenced as the attack stack. In this case, our stack would be the combination of Vue and Vuex.
In your tests, always exercise the stack as much as it makes sense. By never testing the functional combination of various technologies you use, it's easy to miss a critical path of your application. If you don't know Vuex, you can skip this lesson for now. If you want to learn Vuex, you can watch our Vuex course called Vuex for Everyone and we've linked it in the description.
In this lesson, we're going to learn how to test that our component can read from the store and that our component can also write to the store. So let's check what we have today. There's a store file prepared for us, so let's poke into it. We try to make some salad.
We have a simple mutation and an action. So let's make some delicious salad. We have a simple state and only one mutation and action that are putting new ingredients into the salad. To exercise it in a stack, we need a component.
That one is also prepared for us. This component is simply printing out the salad in its template. But we will not care for it today. The important piece is we start leveraging data from the store right away.
We spread the state into the data set. and use map actions to get access to the add ingredient method. The important thing to note here, we do not import the store directly in the component. We would expect that the root component has it and it's made available to us.
So let's jump into the test file right away. The salad bowl component and the store are already getting imported for us. The other thing to note here is we imported Vue and Vuex. When using Vuex, we need to tell Vue about it.
For now, let's do that. Next, let's create the store. So, for the first spec, we just want to see that the store is loaded properly. We can start by mounting our component and make good use of the options we can pass to the view test details.
It's made easy for us, as we can use the key store. To make it more exciting, we can try to push a value directly to our store. Now, let's make sure that it's actually available in our instance. Let's run this back again.
Yay, it's all passing. And that is a great success. We've added the Vuex store to our component through test-utils. Let's add one extra test.
Now, we should also be able to use add-ingredient from the instance. Tomato-tomato. Finally, let's check what we get as a result. Oh no, the test failed.
Too bad. Some of you might have already expected that. And the issue is easy to spot. we need to initiate a store differently.
That should be a very simple addition for us. Great. Our tests now run and pass as they should. And honestly, there is not much more to get the store running inside our view components.
There's one addition, though, I would recommend to do whenever you work with the stores and the view test details. What we did in this line is polluting the global view object, what might not always be the best choice. To save us from this issue, ViewTestDetails provides something called a local view instance. We can get the function to create one from the ViewTestDetails.
Now, let's make use of that one. We can create a new view instance with that and I'll usually give it a very descriptive name. Now, we can install ViewX to that instance directly. To use it in our specs, we need to pass it down.
Great, everything is green now. By looking at the specs you might think of ways to refactor it. Use the momentum and go wild. We learned all the necessary bits and pieces so far.
See you next time. When working with Vue, we often also use its state management companion, Vuex. Testing Vue components with Vuex integrated is sometimes the right way to test the component. Putting various technologies together is often referenced as the attack stack.
In this case, our stack would be the combination of Vue and Vuex. In your tests, always exercise the stack as much as it makes sense. By never testing the functional combination of various technologies you use, it's easy to miss a critical path of your application. If you don't know Vuex, you can skip this lesson for now.
If you want to learn Vuex, you can watch our Vuex course called Vuex for Everyone and we've linked it in the description. In this lesson, we're going to learn how to test that our component can read from the store and that our component can also write to the store. So let's check what we have today. There's a store file prepared for us, so let's poke into it.
We try to make some salad. We have a simple mutation and an action. So let's make some delicious salad. We have a simple state and only one mutation and action that are putting new ingredients into the salad.
To exercise it in a stack, we need a component. That one is also prepared for us. This component is simply printing out the salad in its template. But we will not care for it today.
The important piece is we start leveraging data from the store right away. We spread the state into the data set. and use map actions to get access to the add ingredient method. The important thing to note here, we do not import the store directly in the component.
We would expect that the root component has it and it's made available to us. So let's jump into the test file right away. The salad bowl component and the store are already getting imported for us. The other thing to note here is we imported Vue and Vuex.
When using Vuex, we need to tell Vue about it. For now, let's do that. Next, let's create the store. So, for the first spec, we just want to see that the store is loaded properly.
We can start by mounting our component and make good use of the options we can pass to the view test details. It's made easy for us, as we can use the key store. To make it more exciting, we can try to push a value directly to our store. Now, let's make sure that it's actually available in our instance.
Let's run this back again. Yay, it's all passing. And that is a great success. We've added the Vuex store to our component through test-utils.
Let's add one extra test. Now, we should also be able to use add-ingredient from the instance. Tomato-tomato. Finally, let's check what we get as a result.
Oh no, the test failed. Too bad. Some of you might have already expected that. And the issue is easy to spot.
we need to initiate a store differently. That should be a very simple addition for us. Great. Our tests now run and pass as they should.
And honestly, there is not much more to get the store running inside our view components. There's one addition, though, I would recommend to do whenever you work with the stores and the view test details. What we did in this line is polluting the global view object, what might not always be the best choice. To save us from this issue, ViewTestDetails provides something called a local view instance.
We can get the function to create one from the ViewTestDetails. Now, let's make use of that one. We can create a new view instance with that and I'll usually give it a very descriptive name. Now, we can install ViewX to that instance directly.
To use it in our specs, we need to pass it down. Great, everything is green now. By looking at the specs you might think of ways to refactor it. Use the momentum and go wild.
We learned all the necessary bits and pieces so far. See you next time.