Vue jest test current target parent has class when click（通过v-for添加）

Question

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

我的模板：

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

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

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

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

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

Answer 1

我推断 button-click 应该会导致 selected class 应用于 .office-flightDetails 组中的一个元素（问题中未显示） .

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

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

Vue jest test current target parent has class when click（通过v-for添加）

Vue jest test current target parent has class when click (which is added via v-for)

javascript

vue.js

jestjs

vue-test-utils