No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search

    Failed to resolve directive: close-popup in Jest test

    Help
    3
    5
    1623
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • beatscribe
      beatscribe last edited by 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 1 Reply Last reply Reply Quote 0
      • dobbel
        dobbel @beatscribe last edited by

        @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 1 Reply Last reply Reply Quote 1
        • beatscribe
          beatscribe @dobbel last edited by

          @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.

          1 Reply Last reply Reply Quote 0
          • beatscribe
            beatscribe last edited by

            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.

            1 Reply Last reply Reply Quote 0
            • Graypes
              Graypes last edited by 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.

              1 Reply Last reply Reply Quote 0
              • First post
                Last post