vue.js - 使用 vue-test-utils 无法单击类的特定按钮部分

Question

我想用 vue-test-utils 测试一个可编辑的表。每一行都有编辑按钮，当点击编辑按钮时，表格行展开并允许用户输入信息。

每个编辑按钮都有“editAddress”类，这是我迄今为止尝试过的：

describe('Customers Addresses Table', () => {
    let wrapper;

    beforeEach(() => {
        wrapper = mount(AddressesTable);
    });


    it('can edit an address',() => {
        const firstEditAddressButton = wrapper.findAll('button.editAddress').at(0);
        firstEditAddressButton.trigger('click');
        console.log(firstEditAddressButton.html());
        expect(wrapper.html()).toContain('Close');
    });

});

测试失败，因为似乎没有单击按钮。

我的表格的 html 代码如下所示（我在这里使用 bootstrap-vue 表格）：

<div class="panel panel-default">
    <b-table>
          Address Edition-->
          <template v-slot:cell(name)="data">
               <div>
                     <button class="editAddress" @click="data.toggleDetails(); buttonEditClicked(data.item)">{{ data.item.name }}</button>
               </div>
          </template>

      </b-table>
</div>

单击编辑按钮后，表格应如下转换：

也许我没有正确获取“editAddress”类的第一个按钮，我不知道..

谢谢你的帮助 ！

标签： vue.jsvue-test-utils

Answer 1

试试看

it('can edit an address', async () => {
   const firstEditAddressButton = wrapper.findAll('button.editAddress').at(0);     
   firstEditAddressButton.trigger('click');

   await wrapper.vm.$nextTick();

   expect(wrapper.html()).toContain('Close');
});