Vue jest unit testing, can't test or render component from components library

Viewed 404

We have some complex forms and depending on the login we render different buttons.

However the component comes from a library installed via NPM. So I'm having trouble reaching them in Jest.

Is there a way to render / load the components so I can test the right ones are present?

describe('P1 buttons - show the correct buttons for credential type and registration status', () => {
  beforeEach(async () => {
    await wrapperBeforeEach();
  });
  test('expect button for OPEN_BANKING_UK_MANUAL to be visible', async () => {
    currentRegistrationDetails.credentials = institutionP1UkAutoBarclays;
    wrapper.vm.currentRegistrationDetails.platform = 'P1';
    await wrapper.vm.$nextTick();

    // wont work if Button is component
    const button = wrapper.find('[data-test-id="button-p1-download-ssa"]');

    // this would work if the Button component was local to the project
    const buttomExternal = wrapper.findComponent(Button);

    const registrationP1 = wrapper.find('.registration-p1');
    console.log(registrationP1.html());

    // this fails as Button doesn't render at all.
    expect(buttomExternal.isVisible()).toBe(true);
  });
});

The HTML from console.log(registrationP1.html()); is this —

  <div class="form-actions mb-5">
    <div class="form-actions-content">
      <!----> 
      <!---->
    </div>
  </div>

The buttons should appear between the

      <!----> 
      <!---->

We keep running into these issues with our applications whilst using our component library.

The actual button markup is

        <Button
          data-test-id="button-p1-download-ssa"
          type="primary"
          class="primary button"
          :is-loading="savingSsa"
          :on-click="downloadTheSsaFromModal"
          >Request the SSA</Button
        >
1 Answers

I think you only have to test that the props are bound correctly with the npm dependency. It's not in your scope to test that the Button from an other library is working.

Related