Bootstrap-Vue 组件上的触发事件（测试）答案

【问题标题】：Trigger Event on Bootstrap-Vue Component (testing)Bootstrap-Vue 组件上的触发事件（测试）
【发布时间】：2020-04-26 15:33:15
【问题描述】：

我正在一个 vue 应用程序中编写测试（使用 Jest）。在测试某个组件时，我需要在一个复选框上触发一个更改事件（我正在使用BFormCheckbox）。

当我使用选择器选择复选框时，实际复选框的计算结果为 ('.custom-control-input')，我可以通过下面的测试。但是，我想使用实际组件的名称 (BFormCheckbox)，我觉得这样更容易理解。有什么办法可以做到这一点？

      it('is triggered by clicking a phase checkbox', () => {
        // I would like to write:
        // const phaseCheckbox = wrapper.find(BFormCheckbox);

        // However, I can only get the following to work:
        const phaseCheckbox = wrapper.find('.custom-control-input');

        // this is true for both selectors
        expect(phaseCheckbox.exists()).toBe(true);

        phaseCheckbox.trigger('change');

        // this fails for wrapper.find(BFormCheckbox)
        expect(togglePhaseSpy).toHaveBeenCalled();
      });

【问题讨论】：

@JesusGalvan 谢谢！这样做似乎有点脆弱 - 你有什么办法让它更健壮吗？
BFormCheckbox 生成 HTML，其中嵌套了隐藏的复选框。试试这个：const phaseCheckbox = wrapper.find(BFormCheckbox).find('input')。这在以普通模式、按钮模式和切换模式呈现时也可以工作，因为您没有将其绑定到特定的类名。
您可以看到 BootstrapVue 如何测试 b-form-checkbox here。
您是否导入了BFormCheckbox 组件？

标签： unit-testing vue.js bootstrap-vue vue-test-utils

【解决方案1】：

由于<input type="checkbox"> 嵌套在额外的 HTML 标记中（由 Bootstrap v4 定义），请使用以下命令访问隐藏的输入：

const phaseCheckbox = wrapper.find(BFormCheckbox).find('input')

这不会束缚你使用内部元素类名，因为它们会根据<b-form-checkbox> 的呈现样式模式（即默认自定义复选框、切换样式复选框、按钮样式复选框或普通模式复选框）而改变)。

【讨论】：

【解决方案2】：

Jest documentation 展示了如何按照您的要求进行操作的示例。

组件构造函数：

import Foo from '../components/Foo';

const wrapper = mount(<MyComponent />);
expect(wrapper.find(Foo)).to.have.lengthOf(1);

组件显示名称：

const wrapper = mount(<MyComponent />);
expect(wrapper.find('Foo')).to.have.lengthOf(1);

【讨论】：

对，在页面上肯定可以找到组件。我只是希望能够直接在他们身上触发事件。但是上面特洛伊的回答是一个很好的替代品。