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

Posted 2023-02-22

【中文标题】如何在 Vue 笑话测试中等待引导模式动画完成

【英文标题】：How to wait for bootstrap modal animation to finish in Vue jest test

【发布时间】：2019-09-18 23:11:44

【问题描述】：

是否可以在 Vue jest 测试中等待模态动画完成？我的问题是，当我单击按钮（button.add_modal）时，div.my-modal 应该得到一个类“显示”，但在触发我的按钮后，似乎该类未附加在我的 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);

【参考方案1】：

我们在测试包含BootstrapVue modal 的组件时遇到了类似的问题。我通过查看BV modal unit tests 自己发现了一些有用的东西。在那里，您会看到以下内容自始至终重复：

// 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 unit tests 的任何地方看到它们重复 1-3 次。

另一个有用的项目是在你的包装器安装中存根转换，例如：

wrapper.mount(MyModalComponent, 
  stubs: 
    transition: false
  

这确保了转换同步发生而不是异步发生，如detailed in the docs here。