After we installed the official view test details in the last video, we're now ready to use them. Let's jump right into it. We'll look at the mount capabilities in this video. Mount basically allows us to wrap our component into a special object that gives you various options.
Let's take a brief look at the view test details documentation. You'll find everything that you want to know in this doc. So let me try to navigate you through the most important starting points. Alright, we see that mount takes the component and various options.
The code example below shows how it should be used. So basically, if you mount a component, it's wrapped inside a specific object. Let's try to use that. Let's replace the spec we have here.
Now, let's mount the component. As mentioned, this gives you a wrapper object. So let's peek into it. This does not tell us a lot.
But we see it's working. If you're curious like me and want to know what methods we now have access to, let's jump back to the documentation. As you see, there's a wrapper section. So there is a load of different methods.
We'll cover a bunch of them in the upcoming videos. For now, let's focus on the main mount method. But we'll use the HTML wrapper function. The HTML method should return a stringified version of the current HTML structure of our view component.
Here, I should make a note on what we're going to test going forward. While usually a test-driven development process is highly recommended, we will focus on testing the components that are already there. This will allow us focus on the testing only, instead of creating the components. I will not test every aspect of every component.
but we'll tackle various use cases as we progress. For example, we can use snapshot tests as a simple way to verify that content might be rendered as HTML in the component. There's an extra video on snapshot testing available on ViewSchool and linked in the video description. So, let's make use of the HTML method and use the snapshot capabilities.
Here we go, we created the first snapshot of our component. Let's check it out. All right, that seems to work. As a reference, we should also peek into the actual component if you haven't already.
That all looks pretty right to me. The component's template is very straightforward, so it's easy for us to verify it's working as intended. The next thing we see here, though, is that we have a prop that gets passed in, and the value variable gets printed inside the template. We could potentially test the property on its own.
but that would end up in simply verifying the value of a variable. And that's the core functionality of Vue, so we would not get any value out of that. I would say a good thing we could try to change is the value of the property and verify that the template got updated. As seen in the documentation mount, accept some options a second argument.
Let's try to overwrite the default value. We can pass props to our components through the props data option. If we now rerun the Jest spec, the snapshot should fail. Great!
We see that the test actually prevents accidental changes to the template outcome. This is great. Here we explicitly changed the test though, so we are fine with updating the snapshot and creating a new default. Good!
We have tested the component and learned how to pass in a prop. Before we start diving a little deeper into the actual wrapper, I want to quickly address the other mount method that you might have stumbled upon on the view test details documentation. Shallow mount is the same as the normal mount method, but child components of the one component you want to mount will get stopped automatically. Let's see the difference by rendering the list component we have in our repository.
Let's import the list component. And also let's pick up the shell amount function. Let's try to see the difference between mount and shell amount. And let's just print it out as part of this spec.
We should see a difference in the output. We see real list items being printed out. And here we see a list item stops to be printed out. We can look at those in another video.
I would usually recommend to use mount as a default approach. as it helps to detect potential errors regarding child components early. See you in the next video when we'll look at the wrapper in more detail. After we installed the official view test details in the last video, we're now ready to use them.
Let's jump right into it. We'll look at the mount capabilities in this video. Mount basically allows us to wrap our component into a special object that gives you various options. Let's take a brief look at the view test details documentation.
You'll find everything that you want to know in this doc. So let me try to navigate you through the most important starting points. Alright, we see that mount takes the component and various options. The code example below shows how it should be used.
So basically, if you mount a component, it's wrapped inside a specific object. Let's try to use that. Let's replace the spec we have here. Now, let's mount the component.
As mentioned, this gives you a wrapper object. So let's peek into it. This does not tell us a lot. But we see it's working.
If you're curious like me and want to know what methods we now have access to, let's jump back to the documentation. As you see, there's a wrapper section. So there is a load of different methods. We'll cover a bunch of them in the upcoming videos.
For now, let's focus on the main mount method. But we'll use the HTML wrapper function. The HTML method should return a stringified version of the current HTML structure of our view component. Here, I should make a note on what we're going to test going forward.
While usually a test-driven development process is highly recommended, we will focus on testing the components that are already there. This will allow us focus on the testing only, instead of creating the components. I will not test every aspect of every component. but we'll tackle various use cases as we progress.
For example, we can use snapshot tests as a simple way to verify that content might be rendered as HTML in the component. There's an extra video on snapshot testing available on ViewSchool and linked in the video description. So, let's make use of the HTML method and use the snapshot capabilities. Here we go, we created the first snapshot of our component.
Let's check it out. All right, that seems to work. As a reference, we should also peek into the actual component if you haven't already. That all looks pretty right to me.
The component's template is very straightforward, so it's easy for us to verify it's working as intended. The next thing we see here, though, is that we have a prop that gets passed in, and the value variable gets printed inside the template. We could potentially test the property on its own. but that would end up in simply verifying the value of a variable.
And that's the core functionality of Vue, so we would not get any value out of that. I would say a good thing we could try to change is the value of the property and verify that the template got updated. As seen in the documentation mount, accept some options a second argument. Let's try to overwrite the default value.
We can pass props to our components through the props data option. If we now rerun the Jest spec, the snapshot should fail. Great! We see that the test actually prevents accidental changes to the template outcome.
This is great. Here we explicitly changed the test though, so we are fine with updating the snapshot and creating a new default. Good! We have tested the component and learned how to pass in a prop.
Before we start diving a little deeper into the actual wrapper, I want to quickly address the other mount method that you might have stumbled upon on the view test details documentation. Shallow mount is the same as the normal mount method, but child components of the one component you want to mount will get stopped automatically. Let's see the difference by rendering the list component we have in our repository. Let's import the list component.
And also let's pick up the shell amount function. Let's try to see the difference between mount and shell amount. And let's just print it out as part of this spec. We should see a difference in the output.
We see real list items being printed out. And here we see a list item stops to be printed out. We can look at those in another video. I would usually recommend to use mount as a default approach.
as it helps to detect potential errors regarding child components early. See you in the next video when we'll look at the wrapper in more detail.