测试使用 v-for 指令呈现许多子组件的 vue 组件

Question

这是我的组件 Musics.vue:

<template>
  <div class="flex flex-wrap mb-20 md:mb-32">
    <div
      v-for="(music, index) in musics"
      :key="index"
      class="w-full sm:w-6/12 lg:w-3/12 p-3"
    >
      <MusicCard :music="music" @play="setCurrent($event)" />
    </div>
  </div>
</template>

如您所见，MusicCard 正在循环中。并且每个 MusicCard 都会向父组件发出播放事件。我可以为它写测试吗？（我尝试使用 forEach 但失败了）

这是我的测试：

  it("commits a mutation when 'MusicCard' component emits play event", () => {
    const components = wrapper.findAllComponents({ name: "MusicCard" });
    expect(components.exists()).toBe(true);
    
  });

感谢您的帮助。

Answer 1

您可能需要将测试分解为几个简单的测试。

假设您使用导入的突变或模拟的突变来安装您的组件，您应该能够执行如下操作：

// import { mutations } from "@/store/MyAppStore.js"
// or:
const mutations = {
  myMutation: jest.fn()
}

const store = new Vuex.Store({ mutations })

const wrapper = mount(Musics, {
  store, localVue
})

describe("When Musics component is mounted, it:", () => {

  it("lists several music cards", () => 
  {
    const components = wrapper.findAllComponents({ name: "MusicCard" });
    expect(components.length).toBeGreaterThan(1);   
  })

  it("receive a play event from the 'MusicCard' components", () => 
  {   
    // assert event has been emitted
    expect(wrapper.emitted().myPlayEvent).toBeTruthy()

    // assert event count
    expect(wrapper.emitted().myPlayEvent.length).toBe(2)

    // assert event payload
    expect(wrapper.emitted().myPlayEvent[1]).toEqual([123])
  })

  it("commits a mutation when 'MusicCard' component emits play event", async () => 
  {
    wrapper.vm.$emit('myPlayEvent' /*, payload */)
    
    await wrapper.vm.$nextTick()    

    expect(mutations.myMutation).toHaveBeenCalled()

    // assert payload
    expect(mutations.myMutation).toHaveBeenCalledWith(payload)
  })

})

测试使用 v-for 指令呈现许多子组件的 vue 组件

Testing vue component that rendered many child component with v-for directive

javascript

unit-testing

vue.js

testing

vue-test-utils