Use 3rd party UI libs in tests

[michalkolek]

Hi,

I am trying to run a test for component that uses third party UI library - quasar (vue-cli version).

If I just mount the component, the test will run but it will output a warning that some components are not found (quasar not initiated in the test).

If I try to add Quasar to mount as global:
const wrapper = mount(HelloWorld, { global: { plugins: [q] }, })

the test is not even started and jest is complaining about transformer (probably can't handle @ in css imports):
`
C:....\test-utils-playground\node_modules@quasar\extras\roboto-font\roboto-font.css:1
({"Object.":function(module,exports,require,__dirname,__filename,global,jest){@font-face {
^

SyntaxError: Invalid or unexpected token

  1 |
  2 | import './styles/quasar.scss'
> 3 | import '@quasar/extras/roboto-font/roboto-font.css'
    | ^
  4 | import '@quasar/extras/material-icons/material-icons.css'
  5 | import '@quasar/extras/fontawesome-v5/fontawesome-v5.css'
  6 | import '@quasar/extras/mdi-v4/mdi-v4.css'

  at ScriptTransformer._transformAndBuildScript (node_modules/@jest/transform/build/ScriptTransformer.js:537:17)
  at ScriptTransformer.transform (node_modules/@jest/transform/build/ScriptTransformer.js:579:25)
  at Object.<anonymous> (src/quasar-user-options.js:3:1)

`

This is how quasar is initialised in main.js:
createApp(App) .use(Quasar, quasarUserOptions) .use(store) .use(router) .mount('#app')

What is the correct way to initialise 3rd party library in mount (or outside - globally) as the createLocalVue is no longer available in next iteration of vue-test-utils, please?

--- EDIT ---

I understand the css import issues related to jest. I managed them with moduleNameMapper. However, the initialisation part is still failing.

When I don't import Quasar in plugins, VTU will warn about "Failed to resolve component: ".

When I do import Quasar in plugins:

import { mount } from '@vue/test-utils'
import HelloWorld from '@/components/HelloWorld.vue'
import { Quasar } from 'quasar'

describe('HelloWorld.vue', () => {
  it('renders HelloWorld', () => {
    const wrapper = mount(HelloWorld, {
      global: {
        plugins: [Quasar]
      }
    });
    expect(wrapper.exists()).toBe(true);
  })
})

I am getting errors about $q undefined:

TypeError: Cannot set property '$q' of undefined

       5 | describe('HelloWorld.vue', () => {
       6 |   it('renders HelloWorld', () => {
    >  7 |     const wrapper = mount(HelloWorld, {
         |                     ^
       8 |       global: {
       9 |         plugins: [Quasar]
      10 |       }

      at Object.installQuasar (node_modules/quasar/dist/quasar.cjs.prod.js:6:13468)
      at Object.install (node_modules/quasar/dist/quasar.cjs.prod.js:6:483913)
      at Object.use (node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:2957:28)
      at mount (node_modules/@vue/test-utils/dist/vue-test-utils.cjs.js:2235:17)
      at Object.<anonymous> (tests/unit/example.spec.js:7:21)

Test Suites: 1 failed, 1 total

This is how quasar is initialised in main.js:

import { Quasar } from 'quasar'
import quasarUserOptions from './quasar-user-options'

createApp(App).use(Quasar, quasarUserOptions).mount('#app')

Both the quasar instance and quasarUserOptions are passed as one plugin.

How can I pass both to global.plugins in VTU?
Is this the correct way to mount third party libraries?

[afontcu]

Hi!

I think the initialization is fine. This is probably due to your Jest config not being able to parse/understand CSS or aliases?

[afontcu]

To use plugin with options, an array of options can be passed:

mount(Component, {
  global: {
    plugins: [Plugin, [PluginWithOptions, 'argument 1', 'another argument']]
  }
})

[lmiller1990]

Did you end up figuring this out? Can have a look otherwise. I've not used Quasar before.

[midnight-dev]

I'm also curious if this was figured out. I don't use Quasar, but it's not unimaginable to require features of third party libraries in testing. I was planning on migrating to Vue 3 after it matured, but I'm hesitant to take the plunge while (next) VTU and the class component repos are still in RC territory. Not to discount the incredible amount of work that's gone into these projects - I've just resolved to be patient while final kinks are discovered and fixed.

@nichalko If you're still around, can you give an update?

[michalkolek]

@afontcu Unfortunately, that did not work.

@lmiller1990 @midnight-dev I have abandoned the idea when I found out of from the Quasar devs that there is still some work to be done in the testing area. My take on it is that they are focusing on their implementation of e2e in their own CLI rather than on VTU.

[lmiller1990]

I also tried to get Test Utils working with Quasar but had no luck. The docs are quite confusing - I don't see how it all works together.

I think we should open a discussion in Quasar, perhaps - we need some expert help, it seems there is a lot of Quasar magic behind the scenes required to get things working.

[nokawaii]

Iam having the same issue here. Withouth passing Quasar as plugin, my tests will fail because of some dependency error for which quasar is needed.
When iam passing Quasar as a plugin like described in this post, ill get the same error TypeError: Cannot set property '$q' of undefined .
I was going to investigate and found, that with passing the Quasar import to global plugins causes quasar to call its own install function, which is without the app context (like in app.use(Quasar, options)) understood as SSR context.

So that install function wants to set $q on the SSRContext (in our case now undefined), which is an argument of that install function and cant be provided through the way we have to pass Quasar to the plugins array.

Can anyone maybe suggest a workaround or a solution to this? im also really stuck here

[nokawaii]

Stumbled over this, maybe this may help you?
quasarframework/quasar#8607

[lmiller1990]

I tried to get this working with Quasar but I have no idea how, Quasar is complicated and I don't really understand how it works.

I will need to catch up with someone from Quasar (I guess @rstoenescu) to figure this out.

[freakzlike]

I have running tests with Quasar but I use stubbed quasar components or shallow mount most of the time because this makes it alot easier rather than completely render the quasar components with dependencies.

In case you still want to completely render the quasar components, this was my code:

// jest.config.js
const esModules = ['quasar/lang', 'quasar/dist/quasar.esm.prod.js'].join('|')

module.exports = {
  // ...
  transformIgnorePatterns: [`node_modules/(?!(${esModules}))`],
  // ...
}

// HelloWorld.spec.js
import { mount } from '@vue/test-utils'
import HelloWorld from '@/components/HelloWorld.vue'
import { Quasar } from 'quasar/dist/quasar.esm.prod'

// Optionally options for quasar
const quasarOptions = {}

describe('HelloWorld.vue', () => {
  it('renders HelloWorld', () => {
    // Manually reset Quasars internal install flag
    Quasar.__qInstalled = undefined

    const wrapper = mount(HelloWorld, {
      global: {
        plugins: [[Quasar, quasarOptions]]
      }
    })
    expect(wrapper.exists()).toBe(true)
  })
})

I haven't test this snippet, maybe I missed something.

[lmiller1990]

Does quasar have some docs for testing? Would be great to document it there, and maybe include a link in our docs to their docs.