vue.js - vue/test-utils 和 jest 单元测试问题

Question

我试图让这个单元测试与@vue/test-utils 和 jest 一起工作。出于某种原因，它没有找到 css 类 .user-list__button 并一直说 .find 不是函数。任何帮助都会很棒。

单元测试：

import Vuex from 'vuex'
import { shallowMount, createLocalVue } from '@vue/test-utils'
import UserList from '@/components/UserList.vue'
import mockEntries from '@/store/mock.js'

let store;
const localVue = createLocalVue()
localVue.use(Vuex)

function mountComponent() {
  return shallowMount(UserList, {
      localVue,
      store,
  });
}

describe('UserList.vue', () => {
  beforeEach(() => {
    store = new Vuex.Store({
      state: {
        phonebookEntries: [...mockEntries]
    }
    });
  
  });

  it('renders UserList properly', () => {
    const component = mountComponent();
    const deleteEntry = jest.fn()

    expect(component.name()).toEqual('UserList');
    component.find('.user-list__button').first().simulate('click');
    expect(deleteEntry.mock.calls.length).toEqual(1);

  })
})

HTML

template>
  <section class="user-list">
    <div class="user-list__listings">All Listings</div>
    <ul class="user-list__ul">
        <li class="user-list__data" v-for="(entry, index) in phonebookEntries" :key="index">
          <span class="user-list__entry"><b>{{entry.lastName.toUpperCase()}}</b> ,</span>
          <span class="user-list__entry">{{entry.firstName.toUpperCase()}}</span>
          <span class="user-list__entry"> ...................... </span>
          <span class="user-list__entry">{{entry.phone}}</span>
          <button @click="deleteEntry(index)" class="user-list__entry user-list__button" type="button" id="deleteBtn">delete</button>
        </li>
    </ul>
  </section>
</template>

标签： vue.jsunit-testingjestjsvuexvue-test-utils