首页 > 解决方案 > 如何为 Bootstrap-Vue b-modal 创建一个 vue-test-utils 包装器?

问题描述

b-modal在组件的模板中有以下内容,我正在尝试编写一个单元测试来检查是否在自定义事件updateDashBoardDataClone上调用了方法。updateDashBoardDataClone

        <b-modal
          id="reorder-modal"
          title="Reorder Dashboard"
          @ok="storeNewOrder"
          ok-title="Save"
          ok-variant="success"
          :ok-disabled="disableSave">
          <reorder-modal
            :dash-board-data-clone="dashBoardDataClone"
            :disable-save="disableSave"
            @updateDisableSave="updateDisableSave"
            @updateDashBoardDataClone="updateDashBoardDataClone"/>
        </b-modal>

ReorderModal 是

<template>
  <div>
    <draggable-component
      v-model="dashBoardDataLocal"
      :move="updatePosition"
      handle=".handle"
      ghost-class="ghost"
      @start="drag=true"
      @end="drag=false">
      <div
        v-for="card in dashBoardDataLocal"
        :key="card.id"
        class="card-list-item border p-2 my-3">
          <font-awesome-icon icon="align-justify" class="handle"/>
          {{card.db_name}}
      </div>
    </draggable-component>
  </div>
</template>

这是测试:

  it('it should call updateDashBoardDataClone method on updateDashBoardDataClone custom event', () => {
    const updateDashBoardDataCloneStub = jest.fn()
    wrapper.setMethods({ updateDashBoardDataClone: updateDashBoardDataCloneStub })
    expect(updateDashBoardDataCloneStub).not.toHaveBeenCalled()
    wrapper.find('.col-6 button').trigger('click')
    let modal = document.getElementById('reorder-modal')
    // console.log(modal)
    // let modalWrapper = createWrapper(modal)
    // console.log(modalWrapper)
    // modalWrapper.vm.$emit('updateDashBoardDataClone')
    // expect(updateDashBoardDataCloneStub).toHaveBeenCalled()
    // modalWrapper.destroy()
  })

document.getElementById确实找到了模态,但是let modalWrapper = createWrapper(modal)返回了一个空包装器。

有人知道我如何为模态创建包装器吗?干杯

标签: javascriptunit-testingvuejs2bootstrap-vuevue-test-utils

解决方案


推荐阅读