How to select a checkbox by its id and call setChecked? - vue.js

Question

I'm writing a unit test to check that a method is called when a checkbox is clicked.
I'm using ElementUI and here is an extract from the component template:
<template lang="pug">
el-card
el-checkbox#checkAllCheckbox(
:indeterminate="isCheckAllIndeterminate"
v-model="checkAll"
#change="handleCheckAllChange"
) {{ $t('check all') }}
</template>
And here is my test:
import { shallowMount, createLocalVue } from '#vue/test-utils'
import Vuex from 'vuex'
import ElementUI from 'element-ui'
import MyComponent from '#/components/MyComponent'
const localVue = createLocalVue()
localVue.use(Vuex)
localVue.use(ElementUI)
it.only('Should check all', () => {
const wrapper = shallowMount(MyComponent, { localVue })
let checkAllCheckbox = wrapper.find('#checkAllCheckbox')
checkAllCheckbox.setChecked()
})
})
The test fails with then following error:
wrapper.setChecked() cannot be called on this element
How can I select the checkbox by its id and trigger the change event with the wrapper?
EDIT
Following #tao recommendations, I tried using mount instead of shallowMount in order to avoid stubbing the ElCheckbox component:
import { mount, createLocalVue } from '#vue/test-utils'
import Vuex from 'vuex'
import ElementUI from 'element-ui'
import MyComponent from '#/components/MyComponent'
const localVue = createLocalVue()
localVue.use(Vuex)
localVue.use(ElementUI)
it.only('Should check all', () => {
const wrapper = mount(MyComponent, { localVue })
let checkAllCheckbox = wrapper.find('#checkAllCheckbox')
checkAllCheckbox.setChecked()
})
})
But I still get the same error: wrapper.setChecked() cannot be called on this element. I also tried importing the ElCheckbox component and use it as a stub:
import { shallowMount, createLocalVue } from '#vue/test-utils'
import Vuex from 'vuex'
import ElementUI from 'element-ui'
import MyComponent from '#/components/MyComponent'
import ElCheckbox from 'element-ui/lib/checkbox'
const localVue = createLocalVue()
localVue.use(Vuex)
localVue.use(ElementUI)
it.only('Should check all', () => {
const wrapper = shallowMount(MyComponent, { localVue, stubs: {
'el-checkbox': ElCheckbox
}})
let checkAllCheckbox = wrapper.find('#checkAllCheckbox')
checkAllCheckbox.setChecked()
})
})
But still got the same error: wrapper.setChecked() cannot be called on this element.
After checking the resulting HTML as suggested, here is what it looks like:
<label id="checkAllCheckbox" class="el-checkbox is-checked" aria-controls="undefined">
<span class="el-checkbox__input is-checked"><span class="el-checkbox__inner"></span>
<input type="checkbox" aria-hidden="false" class="el-checkbox__original" value=""></span>
<span class="el-checkbox__label">Check all<!----></span>
</label>
ElementUI doesn't attribute the id to the checkbox itself but to the enclosing label. So I ended up using wrapper.find('#checkAllCheckbox input[type="checkbox"]') and it works.

Answer 1

shallowmount is a declaration: in this test I nor need neither want any of the subcomponents rendered. They can be safely replaced with a stub and they're irrelevant as far as this test is concerned.
Which means <el-checkbox> is replaced by an empty <el-checkbox-stub> and so are all the other sub-components in your template. But you can't call .setChecked() on a stub. You can only call it on an <input type="checkbox">.
One way to fix this would be to replace shallowMount in this test with mount, which would render <el-checkbox>'s markup properly.
Another way to fix it is to tell VueTestUtils not to stub this particular component, by using stubs. (To be exact, you're not telling it not to stub, you're telling it to stub it using something - it's just that the "something" is the actual component - all other sub-components will still be stubbed). Obviously, you'd have to import elCheckbox from the library and specify it in the shallowMount's stubs option, as shown in documentation.