How to Test a Checkbox Is Checked Using Vue Test Utils

Say you want to test a Vue component that contains an HTML checkbox. When something happens the input should become checked.

The docs say that it sets a checked property on the element. However in practise this didn't appear to work for me. I made a small demo component and test and then realised you need to check the [wrapper].element.checked property, not just the [wrapper].checked property.

Here's an example Vue component:

<template>
    <div>
        <input v-model="checked"
               type="checkbox" />
    </div>
</template>

<script>
export default {
    data() {
        return {
            checked: false,
        };
    },
};
</script>

And a test:

import { mount } from '@vue/test-utils';
import ComponentWithCheckbox from './ComponentWithCheckbox';

describe('ComponentWithCheckbox', () => {
    it('Should check the checkbox', async () => {
        const wrapper = mount(ComponentWithCheckbox);

        expect(wrapper.find('input[type="checkbox"]').element.checked)
            .toBe(false);

        await wrapper.setData({ checked: true });

        expect(wrapper.find('input[type="checkbox"]').element.checked)
            .toBe(true);
    });
});

Notice that you call must add .element.checked not just .checked