Trigger Event on Bootstrap-Vue Component (testing)

Question

I am writing tests in a vue app (using Jest). While testing a certain component, I need to trigger a change event on a checkbox (which I am using BFormCheckbox for).

When I select the checkbox using the selector the actual checkbox evaluates to ('.custom-control-input'), I can get the test below to pass. However, I would like to use the name of the actual component (BFormCheckbox), which I feel would be easier to follow. Is there any way to make this work?

      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 thanks! It does seem a little brittle to do it that way - is there anything you do to make it more robust? — Avocado
– Avocado, Commented Jan 9, 2020 at 15:44
BFormCheckbox generates HTML with the hidden checkbox nested inside. Try this: const phaseCheckbox = wrapper.find(BFormCheckbox).find('input'). This will work also when rendered in plain mode, button mode, and switch mode, as you are not tying it to a specific class name. — Troy Morehouse
– Troy Morehouse, Commented Jan 9, 2020 at 15:51

Troy Morehouse · Accepted Answer · 2020-01-09 22:00:15Z

2

Since the <input type="checkbox"> is nested inside additional HTML markup (as defined by Bootstrap v4), use the following to access the hidden input:

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

This will not tie you to using the inner element classname(s), as they do change depending on the rendering style mode of <b-form-checkbox> (i.e. default custom checkbox, switch style checkbox, button style checkbox, or plain mode checkbox).

edited Jan 9, 2020 at 22:00

answered Jan 9, 2020 at 16:04

Troy Morehouse

5,4351 gold badge30 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jesus Galvan · Accepted Answer · 2020-01-09 16:30:51Z

1

Jest documentation shows examples of how to do as you are asking.

Component Constructors:

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

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

Component Display Name:

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

answered Jan 9, 2020 at 16:30

Jesus Galvan

5873 silver badges9 bronze badges

1 Comment

Avocado Over a year ago

RIght, the components can definitely be found on the page. I was just hoping to be able to trigger events directly on them. But Troy's answer above is a good substitute.

Collectives™ on Stack Overflow

Trigger Event on Bootstrap-Vue Component (testing)

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related