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 | </style>
> 64 |
     | ^
  65 | <script>
  66 | export default {
  67 |   data() {

  at Object.withDirectives (node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:2972:17)
  at src/modules/d/.vue:64:35
  at renderFnWithContext (node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:385:21)
  at normalizeChildren (node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:5587:42)
  at createBaseVNode (node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:5349:9)
  at _createVNode (node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:5442:12)
  at Object.createVNodeWithArgsTransform [as createVNode] (node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:5307:12)
  at src/modules/d.vue:62:27
  at renderFnWithContext (node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:385:21)
  at normalizeChildren (node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:5587:42)
  at createBaseVNode (node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:5349:9)
  at _createVNode (node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:5442:12)
  at Object.createVNodeWithArgsTransform [as createVNode] (node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:5307:12)
  at Proxy.render (src/modules/d.vue:55:19)
  at renderComponentRoot (node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:428:44)
  at ReactiveEffect.componentUpdateFn [as fn] (node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:4137:57)
  at ReactiveEffect.run (node_modules/@vue/reactivity/dist/reactivity.cjs.js:164:29)
  at setupRenderEffect (node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:4263:9)
  at mountComponent (node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:4046:9)
  

Answer 1

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.

Answer 2

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);
    })
})