Vue Testing Library

Uses of Vue Testing Library

Vue Testing Library is used when the following condition occurs : 

• When we want to write tests which are not focused on implementation details like, testing how the solution is implemented rather than if it produces the desired output.
   
• When we want to write tests that focus on the actual DOM nodes and not rendered Vue components.
   
• When we want to write tests that query the DOM in the same way a user would.

Installation

This module is distributed via npm and hence it should be installed as one of the project's devDependencies:

If you are using Vue 2 : 

npm install --save-dev @testing-library/vue@5

If you are using Vue 3 : 

npm install --save-dev @testing-library/vue

Vue Testing Library has peerDependencies listings for Vue and vue-template-compiler. 

Setup of Vue Testing Library

As we have seen the uses of Vue Testing Library and its working, let’s move ahead by setting it up in a new Vue CLI generated Vue project.

First of all, we will generate a new Vue application by running the following command in the terminal (Vue CLI should be installed in the machine):

vue create vue-testing-library-demo

Now to run the tests, we will use Jest which is a test runner developed by Facebook. Vue CLI has a plugin which easily sets up Jest. Let’s add the plugin:

vue add unit-jest

Now the plugin added a new script in package.json file:

"test:unit": "vue-cli-service test:unit",

This script would be used to run the tests. This also added a new tests folder in the src, and inside the tests folder itself a unit folder with an example test file named example.spec.js. Now based on the configurations of Jest, when we run npm run test:unit, Jest will look for files in the tests directory and run the test files. Let’s run the example test file:

npm run test:unit

This command should run the example.spec.js test file in the tests/unit directory. The content of this file is:

import { shallowMount } from '@vue/test-utils'
import HelloWorld from '@/components/HelloWorld.vue'

describe('HelloWorld.vue', () => {
  it('renders props.msg when passed', () => {
    const msg = 'new message'  
    const wrapper = shallowMount(HelloWorld, {
      propsData: { msg }
    })
    expect(wrapper.text()).toMatch(msg)
  })
})

Output

Now by default, installing Jest with the Vue CLI plugin will automatically install @vue/test-utils. Hence the above test file is using the shallowMount function from @vue/test-utils. Now a quick way to get familiar with Vue Testing Library is to quickly modify this same test file to use the Vue Testing Library instead of the @vue/test-utils.

We will do this by first uninstalling the @vue/test-utils, as this is not required.

npm uninstall @vue/test-utils --save-dev

Then we will install Vue Testing Library as a development dependency:

npm install @testing-library/vue --save-dev

Then we will proceed to modify tests/unit/example.spec.js to this:

import { render } from '@testing-library/vue'
import HelloWorld from '@/components/HelloWorld.vue'

describe('HelloWorld.vuea, () => {
  it('renders props.msg when passed', () => {
    const msg = 'new message'
    const { getByText } = render(HelloWorld, {
      props: { msg }
    })
    getByText(msg)
  })
})

Output

Now run the test again, and it should still pass. The summary of what we did till now is :

• We used render function exposed by Vue Testing Library to render HelloWorld components. render is only way of rendering components in the Vue Testing Library. When we call render, we pass in the Vue component with an optional options object.
• We then used the options object to pass in the msg props needed by HelloWorld component. The render will return an object with helper methods to query DOM, and one of those methods is getByText.
• We then used getByText to assert if an element with the text content of ‘new message’ exist in DOM.

Now you must have noticed the shift from thinking about testing the rendered Vue component to what the user sees in the DOM. This shift will allow you to test your applications from the user perspective as opposed to focusing more on the implementation details.

Frequently Asked Questions

1. What are the queries provided by Vue Testing Library?
   All the queries from the DOM testing Library are provided by Vue Testing Library.. 
    
2. Do we need to Install DOM Testing Library?
   No, there is no need to install DOM Testing Library.Vue Tesing Library imports everything it needs from DOM Testing Library, and then re-exports it.
    
3. Is Vue Testing Library a replacement for official @vue/test-utils?
   Yes, it is. If we use Vue Testing Library (VTL) then there's no need to install @vue/test-utils.
    
4. What is Vue test utils?
   Vue Test Utils is official unit testing utility library for Vue.js.

Conclusion

In this blog, we started with the Vue Testing Library introduction. Then we discussed the working and uses of  VTL. After that, we saw the setup of the Vue Testing Library in the new Vue CLI generated Vue project.

We hope that this blog helped you enhance your knowledge in getting started with Vue Testing Library and its setup. You may also want to learn about JEST. Learning never stops, and to learn more and become more skilled, head over to our practice platform Coding Ninjas Studio, to practice top problems, attempt Mock Tests, read informative blogs, and interview experiences. Do upvote our blog to help other ninjas grow. 

Happy Learning!