Failed to resolve directive: close-popup in Jest test

beatscribe

I am doing a simple Jest unit test of a method on a component that has a QDialog. I am using Quasar v1.
Every time the test runs I get this:

    console.error
      [Vue warn]: Failed to resolve directive: close-popup
      
      (found in <UploadFile.vue>)

      at warn (node_modules/vue/dist/vue.common.dev.js:630:15)
      at resolveAsset (node_modules/vue/dist/vue.common.dev.js:1591:5)
      at normalizeDirectives$1 (node_modules/vue/dist/vue.common.dev.js:6655:15)
      at _update (node_modules/vue/dist/vue.common.dev.js:6579:17)
      at Array.updateDirectives (node_modules/vue/dist/vue.common.dev.js:6571:5)
      at invokeCreateHooks (node_modules/vue/dist/vue.common.dev.js:6060:22)
      at initComponent (node_modules/vue/dist/vue.common.dev.js:5993:7)
      at createComponent (node_modules/vue/dist/vue.common.dev.js:5976:9)

    console.error
      [Vue warn]: Failed to resolve directive: close-popup

Do I need to import something into my test? I
found this answer by @rstoenescu but the link doesn’t go anywhere anymore and I’m fairly sure my issue isn’t due to it not being in the conf file. I am just not sure what I need to add so the jest system can resolve it.

dobbel

@beatscribe

Maybe this will help:
https://github.com/quasarframework/quasar-testing/blob/dev/packages/unit-jest/README.md

Or you could browse the issues at the Quasar testing repo:
https://github.com/quasarframework/quasar-testing

beatscribe

@dobbel Thank you for your response. I have really dug into that, but still coming up with this warning . The worst part is I don’t even care about the popup in Jest, I’m just testing my functions. I don’t need the layout/html at all, I wish there was a way to just load the functions. I am testing the UI stuff in Cypress.

beatscribe

After six hours of going down different rabbit holes trying to get this to work and never being able to stop the error, I just decided to try Dialog plugin instead of q-dialog and it does not throw any such error.

Graypes

I never found an answer documented but I think my hunch worked.

import { mountFactory } from '@quasar/quasar-app-extension-testing-unit-jest'
import {
   QMenu,
   QList,
   QItemLabel,
   QItem,
   QItemSection,
   QIcon,
   QBtn,
   ClosePopup,
} from 'quasar'
import HelpMenu from '../../../../src/components/menus/HelpMenu.vue'

const $t = jest.fn()
// $t.mockReturnValue('')

const factory = mountFactory(HelpMenu, {
   mount: {
      mocks: { $t },
   },
   quasar: {
      components: {
         QMenu,
         QList,
         QItemLabel,
         QItem,
         QItemSection,
         QIcon,
         QBtn,
      },
      directives: {
         ClosePopup,
      },
   },
})

describe('HelpMenu', () => {
   test('mount w/o error', () => {
      console.log(factory())
      expect(factory).toBeTruthy()
   })
})

I no longer see the error message.

No More Posting New Topics!

Failed to resolve directive: close-popup in Jest test