Question

我想测试v-checkbox组件。调用一次触发器单击将更改选中的复选框状态。

  const flag = wrapper.find('.input-group--selection-controls__ripple')[0]
  flag.trigger('click')

调用两次触发器单击不会更改复选框状态未选中。如何实施？

  const flag = wrapper.find('.input-group--selection-controls__ripple')[0]
  flag.trigger('click')
  flag.trigger('click')

Answer 1

尝试一下：

const wrapper = shallowMount(Component)
// If data is loaded asynchronously, use flush-promises to wait for the data to load.
await flushPromises()
 // Find the delete button for the first to-do item and trigger a click event on it.
$emit('.input-group--selection-controls__ripple', event.target.checked)

检出Vue Test Utils guide，尤其是async behavior。另外，A gentle introduction to testing Vue applications非常好。

Answer 2

为了使我的测试正常工作，我还必须找到下面的特定元素，但是我不需要flushPromises（）。使用下面的类选择器，使用class =“ input-group--selection-controls__ripple”查找正确的元素是关键。这样就可以使click事件更新我尝试测试的绑定。只需找到

<v-checkbox class-"my-checkbox"/>

是不正确的，因为click事件不适用于该元素。

it('Does uncheck', async() => {
    // We need to drill down to the .input-group--selection-controls__ripple element so the click works
    const myCheckbox = wrapper.find('.my-checkbox').find('.input-group--selection-controls__ripple');
    myCheckbox.trigger('click');
    expect(wrapper.vm.someField).toEqual(false);
});

单元测试vuetify组件v-checkbox

2 个答案: