Improvements to mountQuasar

After starting with jest + Quasar I have a couple of proposals which I think will greatly improve the usability of the supplied mountQuasar utility.

Support using either mount or shallowMount

This could easily be implemented by adding an option to the options object (which is already there) and switching on that. The default can stay shallowMount so it’s backwards compatible.

Add stubs to the options array and pass them to mount

Together with the possibility to switch the used mount function this gives a lot of flexibility, for instance making it possible to mount fully and stubbing out selectively.

Add an option to set the resolution

This allow testing responsiveness, for instance components that should render different content based on $q.screen... I have this working in my project like this:

const resizeWindow = ({ x, y }) => {
  global.innerWidth = x
  global.innerHeight = y
  global.dispatchEvent(new Event('resize'))
}

This has to run before createLocalVue() is called (I think). This too can be part of the options object.

Make it possible to mount a component without creating a new localVue

This makes it easy to do multiple mounts in on test file, which is useful when you want to test props that have an effect in created() (that’s one usecase, I’m sure there are more). In my current project I solved this by refactoring out the code that calls createLocalVue and having the test call that separately, but I’m sure there’s more elegant solutions.

[IlCallo]

You may want to note in the readme, regarding VueRouter that either method is supported. Don’t really wanna add this as there could be some unseen side effects and adding it after the creation of VueRouter instance isn’t future proof.

For example, VueRouter (like some other plugins) auto-register itself when included in the codebase if it finds a global Vue reference so you can avoid the Vue.use(VueRouter) in some scenarios, but with Vue3 that will not be possible anymore breaking the codebase of who relied on that mechanism.

Takeoff: just because you currently can, it doesn’t mean you should, nor that it will keep working in the future.

That said, thank you for your feedback and for taking the time to test this out 😃 Unless more feedback comes up, I plan to release the stable version in next weeks as v2, as there has been some breaking changes

[Blfrg]

I looked further into what mountQuasar() and mountFactory() were doing and I found that if mount.localVue is declared, then plugins gets discarded:

// mount-quasar.ts:23 (effectively the same in mount-factory.ts:17-23)
const localVue = options.mount?.localVue ?? createLocalVueForQuasar(options);

// for reference the function deconstructs into:
createLocalVueForQuasar({ quasar, plugins })

Since it’s either/or and not both I tried VueRouter as a plugin and it worked:

import { mountFactory } from '@quasar/quasar-app-extension-testing-unit-jest';
import VueCompositionAPI from '@vue/composition-api';
import VueRouter from 'vue-router';

import App from 'src/App.vue';

const factory = mountFactory(App, {
  mount: {
    router: new VueRouter()
  },
  plugins: [VueCompositionAPI, VueRouter]
});

describe('App', () => {
  test('data classes equals foo', async () => {
    const wrapper = factory();

    // need to async/await for $data to populate
    await wrapper.vm.$nextTick();

    expect(wrapper.vm.$data.classes).toBe('foo');
  });
});

This even simplifies things a bit since I was able to remove everything related to localVue letting it be instantiated by the plugins array

I’m not sure if this will have issues in other scenarios, but I tested on a more complex component and this solution worked there as well. I also confirmed I had no issues with multiple mountFactory() in the same test suite.

If this example reflects the intended usage; The docs could be updated to describe this structure for “Use with VueRouter” ~and “Use with Vuex”~ (see correction below) A “Use with localVue” section could be added in “Caveats” describing localVue.use() implementation mentioning that mount.localVue overrides plugins.

[Vuex] Correction:

[vuex] must call Vue.use(Vuex) before creating a store instance.

      15 |   mount: {
      16 |     router: new VueRouter(),
    > 17 |     store: new Vuex.Store({})
         |            ^
      18 |   },
      19 |   plugins: [VueCompositionAPI, VueRouter, Vuex]

---

Since it seemed like mount.localVue and plugins should be able to co-exist I tested with modified beta to the effect of:

function createLocalVueForQuasar(options: QuasarMountOptions) {
  const localVue = options.mount?.localVue ?? createLocalVue();

// ...
    localVue.use(plugin, ...plugin_options);
// ...
}

and confirmed this allows the use of both implementations simultaneously. You may have avoided this intentionally for some scenario I’m not aware of, but I wanted to point out it seems to be generally ok.