Инициирующее событие для компонента Bootstrap - Vue (тестирование)

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

Это не будет ie Вы используете внутренние имена классов элементов, так как они меняются в зависимости от режима стиля рендеринга <b-form-checkbox> (т.е. пользовательский флажок по умолчанию, флажок стиля переключателя, флажок стиля кнопки или флажок простого режима).

Answer 2

Документация Jest показывает примеры того, как сделать, как вы просите.

Конструкторы компонентов:

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