Question

我正在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();
      });

Answer 1

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

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

这不会让您使用内部元素类名，因为它们会根据<b-form-checkbox>的呈现样式模式（即默认自定义复选框，开关样式复选框，按钮样式复选框或纯样式）而改变模式复选框。

Answer 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);

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

2 个答案: