Javascript 如何在VueTestUtils/Jest中模拟Web API？

我想在一个非常简单的Vue组件上设置一个单元测试，该组件带有耦合到Jest框架的默认Vue测试Utils插件

单击按钮后，处理程序将调用2个方法：

• emitEvent（）：要发出事件（我的测试的实际目标）

• effectUI（）：用于UI效果（使用Web动画API）。此动画应用于“粒子”阵列的每个“粒子”。我不想测试这一部分，但这是一个有问题的部分

我运行组件时工作正常。没有警告，没有错误

但是当我运行测试时，它通过了。。。console.error声明“particle.animate”不是函数

我试过：

• 首先，不做任何特殊的事情：因为EffectUI（）方法与click事件无关（除非它们被同一个处理程序调用），所以它们可能会

• 然后，模拟“动画”功能：到目前为止没有结果。我假设这个问题来自Web API方法没有被识别。我可能完全错了

从组件click的处理程序调用的方法的代码：

effectUI() {
  let particles = this.$el.querySelectorAll('span.particle')
  particles.forEach(particle => { particle.animate(...) }
}

测试文件的代码：

import { mount } from '@vue/test-utils'
import ButtonParticles from '@/components/ButtonParticles.vue'

describe('ButtonParticles.vue', () => {
  const wrapper = mount(ButtonParticles)

  const animStub = jest.fn()

  it('should trigger `clicked` event when user clicks on button', () => {
    let particles = wrapper.findAll('.particle')
    particles.wrappers.forEach(particle => {
      particle.animate = animStub 
    })
    wrapper.find('button').trigger('click')
    expect(wrapper.emitted().clicked).toBeTruthy()
  })

})

预期的结果将是不获取console.error

实际结果是：[Vue warn]：v-on处理程序中的错误：“TypeError:particle.animate不是函数”（+堆栈跟踪）

有人能帮我了解发生了什么吗？

---

谢谢

在测试中，

粒子

是一个包装器。尝试

particle.element.animate=animStub

Hi。在测试中，

particle

是一个包装器。尝试

particle.element.animate=animStub

你说得对！谢谢你能把你的评论变成一个答案吗？这样我就可以投赞成票了？