jest with vue3 typescript TypeError: Cannot read property 'deep' of undefined

Question

I am doing unit test using jest. The things I am working with is vue3 (typescript) with quasar. I am facing the following error:

TypeError: Cannot read property 'deep' of undefined

  62 | }
  63 | 
> 64 |
     | ^
  65 |

user_1375487 · Answer

This is most probably caused by a vue directive that is not loaded in the jest context.

For instance, my v-tooltip directive was not registered/loaded in my Jest setup and was causing this error.

Simply register it globally with config-global or locally in your mount call with global prop.

user_13129353 · Answer

I had the same problem with the error TypeError: Cannot read property 'deep' of undefined. This was caused by the usage of primevue/tooltip.

The error was solved by adding primevue/tooltip, which is a directive, to the test:

import {shallowMount} from '@vue/test-utils';

import examplefrom "@/components/example";
import Tooltip from "primevue/tooltip";


describe('example.vue Test', () => {
    const wrapper = shallowMount(example, {
        global: {
            directives: {
                tooltip: Tooltip
            }
        }
    });
    it('Render', ()=> {
        expect(wrapper.exists()).toBe(true);
    })
})

jest with vue3 typescript TypeError: Cannot read property 'deep' of undefined

2 Answers