VUE开玩笑单元测试，可以从组件库中进行测试或渲染组件

Question

我们有一些复杂的形式，取决于登录方式，我们呈现不同的按钮。

但是，该组件来自通过NPM安装的库。因此，我在开玩笑时遇到困难。

有没有办法渲染 /加载组件以便我可以测试正确的组件？

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

来自console.log（registrationp1.html（）））的HTML;是这样 -

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

出现我们的应用程序中的按钮

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

在使用我们的组件库的同时，我们不断地

。实际按钮标记是

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

Answer 1

我认为您只需要测试道具与npm依赖关系正确绑定。测试其他库中的按钮不在您的范围中。