by Sai gowtham

Testing Dom attributes in Vuejs using Jest

Home » vuejs » 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.

    <h1>Testing dom attributes</h1>
    <a href="">Google</a>  </div>

export default {};

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.

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('')    })

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