Unit test a Vue component with Jest

Instructor: [00:00] I have a very basic counter component that I've created with Vue. It increments and decrements by a multiplier. Right now, I have a multiplier of four. I can also hit a reset button to reset it back to zero. I use the Vue CLI 3.0to get things started here. One of the options that it gives you is to have Jest baked in, so I'll be using Jest to test our counter component.

[00:22] Let's go ahead and take a look at the counter component to see what kind of things we need to test. It looks like we're using the template syntax. We have a multiplierCount to show the current value of the counter. We have three buttons, increments, decrements, and reset.

[00:37] If we look down at the actual component logic, we have a prop defined called multiplier. This is where I set it to four for my example, but the default is one. We have a data prop called counts, which starts at zero. We have our three methods, where we can increment, decrement, and reset.

[00:56] These just increment the count data property. Reset sets it to zero. I also have a computed property where our multiplierCount variable is being shown here. This just takes the current count and multiplies it by the multiplier prop that we pass in.

[01:13] The first thing that we're going to need to do is add a spec file for our test. There's already one called HelloWorld that came with the Vue CLI 3.0I'm going to recreate a new one, and we'll call this counter.spec.js.

[01:29] Before we can get started testing with Jest, we're going to need to import some things. The first thing I need to import is the mount function that comes with the Vue testing library. The next thing I'm going to need to import is our counter. We're going to import that like normal.

[01:45] Now to start writing tests. The first thing I need to do is wrap my test with a describe block. We'll say describe counter.vue, and pass as a function. Something that I like to do up front is test whether the component renders or not. We'll just say it('renders component').

[02:01] Next we need to mount our component and assign it to a variable. I'm going to say const wrapper = mount, and we'll pass our counter to it. What this mount function is doing is taking our counter component and assigning a fully-mounted version of it to our wrapper variable, so we can invoke methods and make assertions on it.

[02:19] For this particular test, I'm going to make a snapshot to verify that the component is rendered properly. I'm going to say expect(wrapper.element).toMatchSnapshot. Let's go ahead and run this. I'm going to open up a terminal and say yarn test:unit.

[02:35] As you can see, one snapshot has been written. Let's go ahead and take a look at it. I'm going to open up the snapshots folder. We'll notice that a new one has been added, counter.spec. It looks like the snapshot is correct. We have our counts amount here, which is zero by default, an increments button, decrements button, and reset button.

[02:54] Next what I'm going to do is test to make sure that the initial count is working properly. We'll say, "has initial count of 0This time, we're going to actually have to talk with the instance itself. We can do that by wrapper.vm.count. This will grab the count data property off our wrapper.

[03:13] Instead of doing a snapshot this time, we're going to check that it's equal to zero. Open the terminal, under tests, it looks like it's passing.

[03:22] Now to test some methods. I'm going to copy this, paste it here, and say "increments count by 1." The increment method can be found directly on the wrapper.vm object. We can invoke it by doing wrapper.vm.increment and assert that it will be now equal to one.

[03:38] I'm going to copy this. We'll say "decrements count by 1." Call the decrement method. This is at 0by default. We'll say -1. The last bit that we'll test is reset. Copy that, "reset counts to 0Call the reset method, 0Run our test. It looks like it's passing.

[04:01] The last thing that we're going to need to test is our computed property. We'll change this to be "multiplierCount is incremented." Since the multiplierCount computer property depends on the multiplier prop, we can actually pass in a property as a second argument to mount.

[04:19] We can say propsData. We'll pass in a multiplier of four. Now to increment our counter, we'll say increment again, and we'll verify that the multiplierCount is equal to four. Run our tests. Looks like it's good. I'm going to do the same thing for decrement, so "is decremented." Call the decrement method, and we'll say -4. Run our tests. Looks like it's good.

[04:54] That's it. Our counter component is tested. I hope this gives you a basic understanding on how to write unit tests for Vue with Jest.