Vue jest 测试当前目标父级点击时有类（通过v-for添加）答案

【问题标题】：Vue jest test current target parent has class when click (which is added via v-for)Vue jest 测试当前目标父级点击时有类（通过v-for添加）
【发布时间】：2020-10-23 12:01:51
【问题描述】：

我正在尝试测试项目列表中的选定项目，通过查找添加到其中的选定类来处理单击事件。

我的模板：

<div class="mycomp" v-for="(list, i) in listItem" :key="list.id" :class="{ selected: i === selectedlist}">
  <button class="md-primary md-raised selectOption" v-if="i !== selectedList" @click="selectItem(list, i)">Select</button>
</div>

测试用例：

test('highlight the selected item', () => {
    const mountFunction = options => {
        return mount(FlightDetails, {
            localVue,
            ...options
        })
    }

    const wrapper = mountFunction()

    wrapper.findAll('.selectOption').at(0).trigger('click')
    const flightCard = wrapper.findAll('.office-flightDetails').at(0).classes()
    expect(flightCard).toContain('selected')
})

在这里，我为列表中的第一个按钮触发了一个单击事件，并期望为列表的第一个包装器添加类。但它没有找到课程：

expect(received).toContain(expected) // indexOf

  Expected value: "selected"
  Received array: ["listItems"]

在 jQuery 或 JavaScript 中，我可以使用 eq 找到索引。这里我用at对吗？

【问题讨论】：

标签： javascript vue.js jestjs vue-test-utils

【解决方案1】：

我推断按钮单击应该会导致 selected 类应用于 .office-flightDetails 组中的元素（未在问题中显示）。

直到下一个渲染周期才会应用该类，所以你必须await the trigger('click') call：

test('highlight the selected item', async () => {
  //...                               ?
   ?
  await wrapper.findAll('.selectOption').at(0).trigger('click')
})

【讨论】：