May 1, 2023 Author - Sai gowtham

Testing Dom attributes in Vue.js using Jest

vuejs1min read

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.

Css Tutorials & Demos