如何写hover测试用例？

来源：8-10 给 Tooltip 组件添加测试

宝慕林6874319

2024-03-18

老师好，我在编写hover的测试用例，但尝试triggerArea.trigger(‘mouseenter’)发现onVisibleChange并没有触发，请问这里是事件名称不对吗？hover测试应该如何写？

test('hover测试', async () => {

    const wrapper = await mount(() =>
      <Tooltip content="Hello Tooltip" trigger="hover" onVisible-change={onVisibleChange}>
        <button id='trigger'>Trigger</button>
      </Tooltip>
      , {
        attachTo: document.body
      }
    )

    const triggerArea = wrapper.find('#trigger')

    onVisibleChange.mockClear()

    triggerArea.trigger('mouseenter')
    await vi.runAllTimers()

    console.log(wrapper.html())

	// 测试失败，onVisibleChange没有被调用
    expect(onVisibleChange).toHaveBeenCalled()

    // expect(wrapper.find('.ds-tooltip__popper').exists()).toBeTruthy()
  })

写回答

2回答

张轩

2024-03-18

已采纳

同学你好

能否把你的代码库（git）提供一下，我在本地帮你看看

宝慕林6874319

明白了老师，感谢

2024-03-19

共2条回复

张轩

2024-03-19

同学你好

经查原因在这里：

// Tooltip.test.tsx 64 行
你写的是：
const triggerArea = wrapper.find('#trigger')
但是这个事件其实是绑定在它的外层容器上的，vitest 内部实现不是真实 DOM 所以类似的冒泡系统应该是没有的
所以要改成
const triggerArea = wrapper.find('.ds-tooltip__trigger')
然后测试就完美通过啦

进阶必学，打造媲美ElementPlus的组件库

Vue3.3 + TS4 ，自主打造媲美 ElementPlus 的组件库

482 学习 · 219 问题

查看课程

相似问题

可以发一期Select或者Dropdown组件的测试吗老师

回答 3

如果自己写这个omit函数，应该怎么给这个函数标注ts类型

回答 1

Collapse点击事件测试

回答 2

tooltip中hover移到popper bug

回答 2

回答 1

打开慕课网App查看更多内容