如何在Vue jest测试中等待引导模式动画完成

Question

是否可以在 Vue jest 测试中等待模态动画完成？我的问题是，当我单击按钮（button.add_modal）时，div.my-modal应该得到一个类“show”，但是在触发我的按钮后，似乎该类没有附加在我的html中（在玩笑测试中），在开发工具中工作正常。

    wrapper.find('button.add_modal').trigger('click');
    //This should return true, but I'm getting false.
    expect(wrapper.contains('div#my-modal.show')).toBe(true);

Answer 1

我们在测试包含BootstrapVue modal 的组件时遇到了类似的问题。通过查看BV 模态单元测试本身，我发现了一些有效的方法。在那里，您会看到以下内容重复出现：

// take action to open modal and then
await waitNT(wrapper.vm)
await waitRAF()
await waitNT(wrapper.vm)
await waitRAF()

...其中waitNT和waitRF是在tests/utils.js中定义的：

export const waitNT = ctx => new Promise(resolve => ctx.$nextTick(resolve))
export const waitRAF = () => new Promise(resolve => requestAnimationFrame(resolve))

这允许 DOM 更新完成并且模式“出现”在您的测试中。您可能需要调整打电话给他们的次数。在触发模态打开后，您会看到它们在BV 单元测试中重复 1-3 次。

另一项有用的项目是清除包装安装中的过渡，例如：

wrapper.mount(MyModalComponent, {
  stubs: {
    transition: false
  }
}

这确保了转换是同步发生的，而不是异步发生的，如此处文档中详述。