by Sai gowtham

Testing Dom attributes in Vue.js using Jest

In this tutorial, we are going to learn about how to test dom attributes in vue by using jest and vue-test-utils.

The example component we are testing.

Link.vue
<template>
  <div>
    <h1>Testing dom attributes</h1>
    <a href="https://google.com">Google</a>  </div>
</template>

<script>
export default {};
</script>

Vue-test-utils library provides us a attributes method by using that we can get attributes of the element we need.

Let’s write a test now.

Link.test.js
import App from '../src/App.vue'
import { shallowMount } from '@vue/test-utils';

describe('Testing dom attributes', () => {
    it('checks href to google ', () => {
        const wrapper = shallowMount(App);
        const a = wrapper.find('a'); //finds an `a` element        expect(a.attributes().href).toBe('https://google.com')    })
})

In the above code, we first find an <a> element from the App component and asserting <a> element has an href attribute with a value of https://google.com.

Top Udemy Courses

JavaScript - The Complete Guide 2020 (Beginner + Advanced)
JavaScript - The Complete Guide 2020 (Beginner + Advanced)
26,545 students enrolled
52 hours of video content
View Course
React - The Complete Guide (incl Hooks, React Router, Redux)
React - The Complete Guide (incl Hooks, React Router, Redux)
221,520 students enrolled
44 hours of video content
View Course
Vue JS 2 - The Complete Guide (incl. Vue Router & Vuex)
Vue JS 2 - The Complete Guide (incl. Vue Router & Vuex)
114,575 students enrolled
21 hours of video content
View Course