Mocking this.$q.notify results in TypeError: this.$q.notify is not a function

[khteh]

I am trying to mock the this.$q.notify but have not had any luck. I have asked in Discord but no response.

beforeEach(() => {
    wrapper = mount(CartView, {
      global: { plugins: [Store], provide: qLayoutInjections() },
      mocks: {
        $q: {
          notify: jest.fn()
       },
      }
    });
});

And get this error during test:

          this.$q.notify({
                  ^

TypeError: this.$q.notify is not a function

How can I successfully mock this.$q.notify? Thanks.

Software version

OS: Ubuntu 21.10 Node: v17.8.0 NPM: 8.5.5 Any other software related to your bug:

What did you get as the error?

What were you expecting?

What steps did you take, to get the error?

[khteh]

I make some changes w.r.t https://test-utils.vuejs.org/migration/#mocks-and-stubs-are-now-in-global

    wrapper = mount(CartView, {
      global: { 
        plugins: [Store], 
        provide: qLayoutInjections(),
        mocks: {
          $q: {
            notify: jest.fn()
          }
        }
      }
    });

and the test crashes:

    console.warn
      [Vue warn]: Unhandled error during execution of render function 
        at <QCard> 
        at <CartView ref="VTU_COMPONENT" > 
        at <VTUROOT>

      at warn (node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:40:17)
      at logError (node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:214:9)
      at handleError (node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:206:5)
      at renderComponentRoot (node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:916:9)
      at ReactiveEffect.componentUpdateFn [as fn] (node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:4963:57)
      at ReactiveEffect.run (node_modules/@vue/reactivity/dist/reactivity.cjs.js:171:25)
      at setupRenderEffect (node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:5089:9)
      at mountComponent (node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:4872:9)

  ● MobileCartView tests › Mobile cart quantity and price tests

    TypeError: Cannot read properties of undefined (reading 'height')

      189 |   }
      190 | };
    > 191 | </script>
          |                                                  ^
      192 |

      at src/components/MobileCartView.vue:191:65
      at e (node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:844:21)
      at hSlot (node_modules/quasar/dist/quasar.esm.prod.js:6:25920)
      at Proxy.<anonymous> (node_modules/quasar/dist/quasar.esm.prod.js:6:75007)
      at renderComponentRoot (node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:887:44)
      at ReactiveEffect.componentUpdateFn [as fn] (node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:4963:57)
      at ReactiveEffect.run (node_modules/@vue/reactivity/dist/reactivity.cjs.js:171:25)
      at setupRenderEffect (node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:5089:9)
      at mountComponent (node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:4872:9)
      at processComponent (node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:4830:17)
      at patch (node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:4433:21)
      at ReactiveEffect.componentUpdateFn [as fn] (node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:4970:21)
      at ReactiveEffect.run (node_modules/@vue/reactivity/dist/reactivity.cjs.js:171:25)
      at setupRenderEffect (node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:5089:9)
      at mountComponent (node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:4872:9)
      at processComponent (node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:4830:17)
      at patch (node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:4433:21)
      at ReactiveEffect.componentUpdateFn [as fn] (node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:4970:21)
      at ReactiveEffect.run (node_modules/@vue/reactivity/dist/reactivity.cjs.js:171:25)
      at setupRenderEffect (node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:5089:9)
      at mountComponent (node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:4872:9)
      at processComponent (node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:4830:17)
      at patch (node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:4433:21)
      at render (node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:5574:13)
      at mount (node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:3856:25)
      at Object.app.mount (node_modules/@vue/runtime-dom/dist/runtime-dom.cjs.js:1539:23)
      at mount (node_modules/@vue/test-utils/dist/vue-test-utils.cjs.js:7919:18)
      at Object.<anonymous> (test/jest/__tests__/components/MobileCartView.test.js:36:22)

[drev74]

Still doesn't work for Quasar 2.11.5, Vitest 0.27.1 and "@quasar/quasar-app-extension-testing-unit-vitest": "^0.1.2". I added injections from here and did this:

it('mock a dummy call', async () => {
    const wrap = mount(Dummy, {
      global: {
        provide: qLayoutInjections(),
        mocks: {
          $q: {
            notify: vi.fn(),
          },
        },
      },
    });

    expect(wrap.html()).toContain('Dummy');
    await formInput = wrap.get('[data-test=form-top]').trigger('submit');
    console.log(wrap.emitted());
  });
});

Getting the same error:

 FAIL  test/sfc/dummy.spec.ts > Dummy Component > mock a dummy call
TypeError: Cannot read properties of undefined (reading 'has')
 ❯ ReactiveEffect.fn node_modules/quasar/src/components/btn/QBtn.js:100:31
    101| 
    102|       return {                                                        
    103|         // needed; especially for disabled <a> tags
       |       ^
    104|         onClick: stopAndPrevent
    105|       }
 ❯ ReactiveEffect.run node_modules/@vue/reactivity/dist/reactivity.cjs.js:191:25
 ❯ ComputedRefImpl.get value [as value] node_modules/@vue/reactivity/dist/reactivity.cjs.js:1142:39
 ❯ ReactiveEffect.fn node_modules/quasar/src/components/btn/QBtn.js:122:19
 ❯ ReactiveEffect.run node_modules/@vue/reactivity/dist/reactivity.cjs.js:191:25

[IlCallo]

Please provide a repro, I don't have the time to reproduce the problem by trial and errors Also, the issue author was apparently referring to a Jest problem (can't be sure, he didn't mention it), while your is a Vitest problem

[drev74]

I solved this problem by mocking $q stuff and forgot about it long ago. Sorry, can't reproduce it anymore :smile_cat:

[IlCallo]

Thanks for the update! Closing this one then Can you share how you mocked $q stuff successfully?

[rubennaatje]

@IlCallo i did it like this in our nuxt project setup file

installQuasarPlugin({ plugins: { Notify } });

test file:

  const notify = vitest.fn();

  const wrapper = shallowMount(MyComponent, {
    global: {
      provide: {
        _q_: { notify },
      },
    },
  });
// Trigger notify somehow
expect(notify).toHaveBeenCalled();

[maximilianfixl]

@IlCallo i did it like this in our nuxt project setup file

installQuasarPlugin({ plugins: { Notify } });

test file:

  const notify = vitest.fn();

  const wrapper = shallowMount(MyComponent, {
    global: {
      provide: {
        _q_: { notify },
      },
    },
  });
// Trigger notify somehow
expect(notify).toHaveBeenCalled();

I am currently looking for a clean solution to test Quasar components in a Nuxt 3 project. How have you integrated quasar-testing into your Nuxt code base?

I would appreciate a short feedback.

Best