[Vuejs]-How to test my tooltip component using Vue.js and Jest?

by

0👍

Well, there are a couple of things that need to be fixed/clarified.

First of all, you are using shallowMount to create a component which you want to test, it stubs all custom components provided in tested component so you don’t have to additionally use stub parameter to stub them, you can easily delete this: stubs: ['tooltipComponent', 'boxComponent', 'switchComponent'].

When you want to find specific component it’s recommended to use findComponent instead of just find. (Using find to search for a component is actually deprecated). To properly identify component it’s best to import it in your test file and use it in findComponent argument, something like this:

import BoxComponent from 'path/to/BoxComponent'

it('lovely test', () => {
    wrapper.findComponent(BoxComponent)
})

After this your test should pass, but there are some things to consider like using mount instead of shallowMount. It’s explained here, but to wrap it up, mount will render actual component with its children, where shallowMount stubs components inside tested component, so you are not testing the actual component but some "shadow" of its true nature. To see a difference between this functions I would recommend to create a wrapper with both functions and then see what html() will return from them.

Leave a comment