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

Question

我想用 vue-test-utils 测试 editable table。每行都有编辑按钮，当单击编辑按钮时，table 行展开并允许用户输入信息。

每个编辑按钮都有 class "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');
    });

});

测试失败，因为按钮似乎没有被点击..

我的table的html代码是这样的（我这里用的是bootstrap-vuetable）：

<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>

点击编辑按钮后，table应该变成这样：

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

感谢您的帮助！

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

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

Impossible to click on a specific button part of a class with vue-test-utils

vue.js

vue-test-utils