Failed to resolve directive: close-popup in Jest test
-
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. -
Maybe this will help:
https://github.com/quasarframework/quasar-testing/blob/dev/packages/unit-jest/README.mdOr you could browse the issues at the Quasar testing repo:
https://github.com/quasarframework/quasar-testing -
@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.
-
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.
-
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.