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
>