Looking to set up a unit test for a simple Vue Component using the default Vue Test Utils plugin together with Jest Framework.
When a button is clicked, the handler triggers two methods:
emitEvent(): to emit an event (the main focus of my test),
effectUI(): which applies a UI effect using the Web Animations API. This animation affects each 'particle' in a 'particles' array. While I don't want to test this part yet, it's causing issues.
Everything runs smoothly when the component is executed. No warnings or errors are encountered.
However, when running the test, it passes... but with a console.error indicating that 'particle.animate' is not recognized as a function.
Attempts made so far include:
Initially doing nothing specific: since EffectUI() isn't directly related to the click event, maybe there's a connection...
Then trying to mock the "animate" function without success. It seems like the problem lies in the Web API method not being properly identified. That might be incorrect though.
Code snippet for the method triggered from the component's click handler:
effectUI() {
let particles = this.$el.querySelectorAll('span.particle')
particles.forEach(particle => { particle.animate(...) }
}
Code snippet from the test file:
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()
})
})
Expected outcome is to eliminate the console.error message.
Current result shows: [Vue warn]: Error in v-on handler: "TypeError: particle.animate is not a function" (+ stack trace)
If anyone can provide insights on what could be happening, your assistance would be highly appreciated! Thank you!