Testing Dom attributes in Vuejs using Jest

In this tutorial, we are going to learn about how to test dom attributes in vuejs 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.