DEV Community

Alan Schio
Alan Schio

Posted on

Testing Hooks on Vue 2 (or Options API)

Have you ever spent hours thinking how could you test a method called on mount?
First lets say we have this component:

export default {
  name: 'MyCustomComponent',
  mounted() {
    this.calledOnMount()
  },
  methods: {
    calledOnMount() {}
  }
}
Enter fullscreen mode Exit fullscreen mode

We want to make sure the calledOnMount will be called, using @vue/test-utils and vitest/jest there are two main ways to test validate it:

  • toHaveBeenCalled
  • toBeCalled

But the work with a spy function and usually we write tests like this:

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

describe('MyCustomComponent.vue', () => {
  const wrapper = mount(MyCustomComponent)
  spyOn(wrapper.vm, 'calledOnMount')
})
Enter fullscreen mode Exit fullscreen mode

When calling the mount it already runs the mounted lifecicly, so, even adding a spy it will always fail.

  • toHaveBeenCalled -> we can't intercept the mount proccess to add a spy on here
  • toBeCalled -> the function has already be called

But calm down, there is a way to test it, for sure!
We had to bind the spy by accessing the .vue component and its options.methods such:

import MyCustomComponent from '../MyCustomComponent.vue'
type MyCustomComponentType = {
  options: { methods: { calledOnMount: () => void } }
}
vi.spyOn(
  (MyCustomComponent as unknown as MyCustomComponentType).options.methods,
  'calledOnMount'
)
Enter fullscreen mode Exit fullscreen mode

This way you dont have to intercept the wrapper functions, but the component signature function.
Once the mounted component is like a new "instance" of a "class" component, the spy we add on the .vue, will also works with the mounted component on test.

describe('MyCustomComponent.vue', () => {
  const wrapper = mount()
  it('Should remove scroll event listener on destroy', async () => {
    expect(
      (MyCustomComponent as unknown as MyCustomComponentType).options.methods
        .calledOnMount
    ).toHaveBeenCalled()
  })
})

Enter fullscreen mode Exit fullscreen mode

Now you can easy test your functions and everything you do on mount.

Do your career a big favor. Join DEV. (The website you're on right now)

It takes one minute, it's free, and is worth it for your career.

Get started

Community matters

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Dive into an ocean of knowledge with this thought-provoking post, revered deeply within the supportive DEV Community. Developers of all levels are welcome to join and enhance our collective intelligence.

Saying a simple "thank you" can brighten someone's day. Share your gratitude in the comments below!

On DEV, sharing ideas eases our path and fortifies our community connections. Found this helpful? Sending a quick thanks to the author can be profoundly valued.

Okay