Question

我想在一个非常简单的Vue组件上设置单元测试，并使用默认的Vue Test Utils插件与Jest Framework耦合。

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

emitEvent（）：发出一个事件（我测试的实际目标），
effectUI（）：用于UI效果（使用Web动画API）。该动画将应用于“粒子”数组的每个“粒子”。我还不想测试这一部分，但这是有问题的。

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

但是当我运行测试时，它通过...，并显示console.error，表明“ particle.animate”不是一个函数。

我尝试过：

首先，没有做任何特别的事情：由于EffectUI（）方法与click事件无关（除非它们由同一个处理程序调用），所以也许它们可以...
然后，模拟“动画”功能：到目前为止没有结果。我认为问题来自无法识别的Web API方法。我可能完全错了。

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

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警告]：v-on处理程序中的错误：“ TypeError：particle.animate不是函数”（+堆栈跟踪）

任何人都可以帮助我了解发生了什么事？谢谢！

Answer 1

在您的测试中，particle是包装器。尝试particle.element.animate = animStub

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

1 个答案: