如何通过 id select 一个复选框并调用 setChecked？

Question

我正在编写一个单元测试来检查在单击复选框时是否调用了一个方法。

我正在使用 ElementUI，这里是组件模板的摘录：

<template lang="pug">
  el-card
    el-checkbox#checkAllCheckbox(
          :indeterminate="isCheckAllIndeterminate"
          v-model="checkAll"
          @change="handleCheckAllChange"
        ) {{ $t('check all') }}
</template>

这是我的测试：

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

测试失败并出现以下错误：

wrapper.setChecked() cannot be called on this element

如何 select 通过其 id 选择复选框并使用包装器触发更改事件？

编辑
按照@tao 的建议，我尝试使用 mount 而不是 shallowMount 以避免存根 ElCheckbox 组件：

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

但我仍然得到同样的错误：wrapper.setChecked() cannot be called on this element。我还尝试导入 ElCheckbox 组件并将其用作存根：

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

但仍然出现同样的错误：wrapper.setChecked() cannot be called on this element。

按照建议检查结果 HTML 后，结果如下：

<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 不将 id 归于复选框本身，而是归于封闭的 label。所以我最终使用了 wrapper.find('#checkAllCheckbox input[type="checkbox"]') 并且它有效。

Answer 1

shallowmount 是一个声明：在这个测试中我也不需要渲染任何子组件。它们可以安全地替换为存根，并且就此测试而言它们是无关紧要的。

这意味着 <el-checkbox> 被空的 <el-checkbox-stub> 替换，模板中的所有其他子组件也是如此。但是你不能在存根上调用 .setChecked() 。您只能在 <input type="checkbox">.

上调用它

解决此问题的一种方法是将此测试中的 shallowMount 替换为 mount，这将正确呈现 <el-checkbox> 的标记。

另一种修复方法是使用 stubs 告诉 VueTestUtils 不要存根这个特定组件。（确切地说，您不是在告诉它不要存根，而是在告诉它使用某些东西存根——只是“某物”是实际组件——所有其他子组件仍将被存根）。显然，您必须从库中导入 elCheckbox 并在 shallowMount 的 stubs 选项中指定它，如文档中所示。

如何通过 id select 一个复选框并调用 setChecked？

How to select a checkbox by its id and call setChecked?

mocha.js

karma-runner

vue.js

element-ui