Question

我的目标？为了能够在包装器中获取所有DOM元素，特别是在这种情况下的“表”，其中的“ v-if”被初始化为“ null”，并成为安装在钩子上的and数组。

我尝试了什么？使用异步等待nextTick（）

import { createLocalVue, shallowMount } from '@vue/test-utils'

import BootstrapVue from 'bootstrap-vue'
import _ from 'lodash'

import AndonKanban from '@/components/andon/andon_kanban.vue'

const localVue = createLocalVue()
localVue.use(BootstrapVue, _)

describe('andon_kanban', () => {
  test('is detecting a table', async () => {
    const wrapper =  await shallowMount(AndonKanban, {
      localVue,
      mocks:{
        $route:{
          params:{
            step:'ALL'
          }
        }
      }
    }
    )

    await wrapper.vm.$nextTick()
    expect(wrapper.get('table'))

  })
})

我得到了什么？

Unable to find table within: <div id="app">
      <!---->
      <div>
        <b-form-group-stub label="Andon activé" feedbackarialive="assertive">
          <b-form-checkbox-group-stub buttonvariant="secondary" options="" valuefield="value" textfield="text" htmlfield="html" disabledfield="disabled" switches="true" checked=""></b-form-checkbox-group-stub>
        </b-form-group-stub>
      </div>
      <!---->
    </div>

      24 |     
      25 |     await wrapper.vm.$nextTick()
    > 26 |     expect(wrapper.get('table'))
      27 | 
      28 |   })
      29 | })

我希望获得一个更新的DOM，其中包含我的表，该表将变得可见，因为在挂接的钩子之后，v-if“网格”内部的数据不再为空（“挂接”钩子中的多个函数创建数据并表格就会出现。）

这是我组件的“安装部分”

mounted: function() {
    if (this.$route.params.step) {
      bus.currentStep = Steps[this.$route.params.step]
    } else {
      bus.currentStep = Steps['NO_KANBAN']
    }
    this.grid = this.generateGrid()
    this.lowStockGrid = this.generateGrid()
    this.unseenGrid = this.generateGrid()
    this.fifoGrid = this.generateGrid()

    this.addAndonType('Fifo', 'fifo')
    this.addAndonType('Peu de stock', 'low_stock')
    this.addAndonType('Carte en retard', 'unseen_card')
    this.addAndonType('Andons critiques', 'andon_high_severity')
    this.refreshLoop()
  },

通过挂接钩更新数据后测试渲染的Vue组件

0 个答案: