Jest and Cypress AE aren't compatible with Quasar v2 / Vue 3

[e-tobi]

quasar-testing needs to be updated for Quasar v2 / Vue3. I've created this issue just to track things I've discovered while trying to get unit testing to work for components using Quasar v2.

• Several components (QPage, QHeader etc.) require a layout. The layout is accessed via provide/inject by the layoutKey symbol declared in utils/private/symbols.js. These symbols are not exported by Quasar, so it's not possible to injected a layout stub from within a unit test. The only solution I could come up with is to either export these symbols in Quasar or at least to create them with Symbol.for() to allow to use them in the unit tests. This is a minimal passing test case for a component using QPage:

  
  import { mount } from '@vue/test-utils'
  import { defineComponent } from 'vue'
  import { QPage } from 'quasar'

const Component = defineComponent({ template: '

Test

', components: { QPage }, setup() { return {

}

} })

describe('component', () => { it('renders the template', () => { const wrapper = mount(Component, { global: { provide: {

          header: {},
          footer: {},
          right: {},
          left: {},
          isContainer: {
            value: true
          },
          containerHeight: {
            value: 100
          }
      }
    }
  }
})
expect(wrapper.find("div").text()).toBe("Test")

}) })

[alexanderdeabreuwannme]

Actually i have this issue with that example.. how i can solve this?

Actually this its my Jest config https://pastebin.com/NpabtrkS and i'm running tests with the following command

quasar test --unit jest

 FAIL  test/jest/__tests__/layouts/MainLayout.spec.js
  ● Test suite failed to run

    Configuration error:

    Could not locate module quasar mapped as:
    /home/alexander-pc/Escritorio/Wannme/wannme-v3-pay-checkout-vue/node_modules/quasar-framework.

    Please check your configuration for these entries:
    {
      "moduleNameMapper": {
        "/quasar/": "/home/alexander-pc/Escritorio/Wannme/wannme-v3-pay-checkout-vue/node_modules/quasar-framework"
      },
      "resolver": undefined
    }

      1 | import { mount } from '@vue/test-utils'
      2 | import { defineComponent } from 'vue'
    > 3 | import { QPage } from 'quasar'
        | ^
      4 |
      5 | const Component = defineComponent({
      6 |   template: '<QPage><div>Test</div></QPage>',

      at createNoMappedModuleFoundError (node_modules/jest-resolve/build/index.js:551:17)
      at Object.<anonymous> (test/jest/__tests__/layouts/MainLayout.spec.js:3:1)

Test Suites: 1 failed, 1 total
Tests:       0 total
Snapshots:   0 total
Time:        1.052 s

[moghthalkushal]

Are these bellow issues again related to #164 #8671 and pending Q2 goals ?

Migration to Qv2 of most used testing AEs (@quasar/testing, @quasar/testing-unit-jest, @quasar/testing-e2e-cypress)

Steps followed ` $ quasar create app --branch next $ cd app $ quasar ext add @quasar/testing

? Please choose which testing harnesses to install: ❯◉ Jest Unit Testing

? Please choose how to install required babel rules: (Use arrow keys) ❯ Overwrite babel.config.js and use additional .babelrc

? Please choose how to install required babel rules: Overwrite babel.config.js and use additional .babelrc ? Jest Unit testing will now be installed. Please choose additional options: ◉ Extra "scripts" in your package.json ◉ TypeScript support ❯◉ SFC webpack loader

? Please choose how to install required babel rules: Overwrite babel.config.js and use additional .babelrc ? Jest Unit testing will now be installed. Please choose additional options: Extra "scripts" in your package.json, TypeScript support, SFC webpack loader

App · Updating /quasar.extensions.json for "@quasar/testing-unit-jest" extension ... App · Running App Extension install script... ? Overwrite "test/jest/.eslintrc.js"? Overwrite ? Overwrite "test/jest/.gitignore"? Overwrite ? Overwrite "jest.config.js"? Overwrite ? Overwrite "test/jest/jest.setup.ts"? Overwrite ? Overwrite "test/jest/tests/App.spec.ts"? Overwrite ? Overwrite "test/jest/tests/QBtn-demo.spec.ts"? Overwrite ? Overwrite "test/jest/tests/demo/QBtn-demo.ts"? Overwrite ? Overwrite "test/jest/tests/demo/QBtn-demo.vue"? Overwrite ? Overwrite "test/loaders/jest-loader.js"? Overwrite ? Overwrite ".babelrc"? Overwrite ? Overwrite "babel.config.js"? Overwrite App · Updating dependencies... App · [sync] Running "yarn " yarn test:unit
`

System info

Operating System - Darwin(20.3.0) - darwin/x64 NodeJs - 14.16.0

Global packages NPM - 7.7.5 yarn - 1.22.10 @quasar/cli - 1.1.3 @quasar/icongenie - Not installed cordova - Not installed

Important local packages quasar - 2.0.0-beta.12 -- Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time @quasar/app - 3.0.0-beta.15 -- Quasar Framework local CLI @quasar/extras - 1.10.3 -- Quasar Framework fonts, icons and animations eslint-plugin-quasar - Not installed vue - 3.0.11 -- vue vue-router - 4.0.5 vuex - 4.0.0 -- state management for Vue.js electron - Not installed electron-packager - Not installed electron-builder - Not installed @babel/core - 7.13.15 -- Babel compiler core. webpack - 4.44.1 -- Packs CommonJs/AMD modules for the browser. Allows to split your codebase into multiple bundles, which can be loaded on demand. Support loaders to preprocess files, i.e. json, jsx, es7, css, less, ... and your custom stuff. webpack-dev-server - 3.11.2 -- Serves a webpack app. Updates the browser on changes. workbox-webpack-plugin - Not installed register-service-worker - 1.7.2 -- Script for registering service worker, with hooks typescript - 4.2.2 -- TypeScript is a language for application scale JavaScript development @capacitor/core - Not installed @capacitor/cli - Not installed @capacitor/android - Not installed @capacitor/ios - Not installed

Quasar App Extensions @quasar/quasar-app-extension-testing - 1.0.3 -- A Quasar App Extension for managing Test Harnesses @quasar/quasar-app-extension-testing-unit-jest - 2.2.2 -- A Quasar App Extension for running Jest tests`

`yarn run v1.22.10 $ jest --updateSnapshot FAIL test/jest/tests/QBtn-demo.spec.ts ● Test suite failed to run

Cannot find module 'vue-template-compiler' from 'node_modules/@quasar/quasar-app-extension-testing-unit-jest/node_modules/@vue/test-utils/dist/vue-test-utils.js'

Require stack:
  node_modules/@quasar/quasar-app-extension-testing-unit-jest/node_modules/@vue/test-utils/dist/vue-test-utils.js
  node_modules/@quasar/quasar-app-extension-testing-unit-jest/dist/create-local-quasar.js
  node_modules/@quasar/quasar-app-extension-testing-unit-jest/dist/mount-quasar.js
  node_modules/@quasar/quasar-app-extension-testing-unit-jest/dist/index.js
  test/jest/__tests__/QBtn-demo.spec.ts

  at Resolver.resolveModule (node_modules/jest-resolve/build/index.js:306:11)

FAIL test/jest/tests/App.spec.ts ● Test suite failed to run

test/jest/__tests__/App.spec.ts:1:10 - error TS2305: Module '"@vue/test-utils"' has no exported member 'createLocalVue'.

1 import { createLocalVue, mount } from '@vue/test-utils';
           ~~~~~~~~~~~~~~
test/jest/__tests__/App.spec.ts:3:10 - error TS2305: Module '"vue"' has no exported member 'VueConstructor'.

3 import { VueConstructor } from 'vue';
           ~~~~~~~~~~~~~~
test/jest/__tests__/App.spec.ts:35:37 - error TS2769: No overload matches this call.
  The last overload gave the following error.
    Argument of type '{ localVue: any; }' is not assignable to parameter of type 'MountingOptions<(({ [x: number]: string; } & { length?: number | undefined; toString?: string | undefined; toLocaleString?: string | undefined; concat?: string[] | undefined; join?: string | undefined; ... 15 more ...; includes?: ((searchElement: string, fromIndex?: number | undefined) => boolean) | undefined; }) | ...'.
      Object literal may only specify known properties, and 'localVue' does not exist in type 'MountingOptions<(({ [x: number]: string; } & { length?: number | undefined; toString?: string | undefined; toLocaleString?: string | undefined; concat?: string[] | undefined; join?: string | undefined; ... 15 more ...; includes?: ((searchElement: string, fromIndex?: number | undefined) => boolean) | undefined; }) | ...'.

35   const wrapper = mount(QBtnDemo, { localVue });
                                       ~~~~~~~~

  node_modules/@vue/test-utils/dist/mount.d.ts:25:25
    25 export declare function mount<PropsOptions extends Readonly<ComponentPropsOptions>, RawBindings, D, C extends ComputedOptions = {}, M extends Record<string, Function> = {}, E extends EmitsOptions = Record<string, any>, Mixin extends ComponentOptionsMixin = ComponentOptionsMixin, Extends extends ComponentOptionsMixin = ComponentOptionsMixin, EE extends string = string>(componentOptions: ComponentOptionsWithObjectProps<PropsOptions, RawBindings, D, C, M, E, Mixin, Extends, EE>, options?: MountingOptions<ExtractPropTypes<PropsOptions> & PublicProps, D>): VueWrapper<ComponentPublicInstance<ExtractPropTypes<PropsOptions>, RawBindings, D, C, M, E, VNodeProps & ExtractPropTypes<PropsOptions>>>;
                               ~~~~~
    The last overload is declared here.
test/jest/__tests__/App.spec.ts:39:22 - error TS2339: Property 'increment' does not exist on type 'ComponentPublicInstance<unknown, {}, {}, {}, {}, {}, unknown, {}, false, ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>>'.

39     expect(typeof vm.increment).toBe('function');
                        ~~~~~~~~~
test/jest/__tests__/App.spec.ts:49:22 - error TS2339: Property 'counter' does not exist on type 'ComponentPublicInstance<unknown, {}, {}, {}, {}, {}, unknown, {}, false, ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>>'.

49     expect(typeof vm.counter).toBe('number');
                        ~~~~~~~
test/jest/__tests__/App.spec.ts:51:24 - error TS2339: Property 'counter' does not exist on type '{}'.

51     expect(defaultData.counter).toBe(0);
                          ~~~~~~~
test/jest/__tests__/App.spec.ts:57:15 - error TS2339: Property 'counter' does not exist on type 'ComponentPublicInstance<unknown, {}, {}, {}, {}, {}, unknown, {}, false, ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>>'.

57     expect(vm.counter).toBe(1);
                 ~~~~~~~

Test Suites: 2 failed, 2 total Tests: 0 total Snapshots: 0 total Time: 3.408 s Ran all test suites. error Command failed with exit code 1. info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.`

[LaurenceHo]

Are these bellow issues again related to #164 #8671 and pending Q2 goals ?

Migration to Qv2 of most used testing AEs (@quasar/testing, @quasar/testing-unit-jest, @quasar/testing-e2e-cypress)

Steps followed ` $ quasar create app --branch next $ cd app $ quasar ext add @quasar/testing ......

Quasar App Extensions @quasar/quasar-app-extension-testing - 1.0.3 -- A Quasar App Extension for managing Test Harnesses @quasar/quasar-app-extension-testing-unit-jest - 2.2.2 -- A Quasar App Extension for running Jest tests`

`yarn run v1.22.10 $ jest --updateSnapshot FAIL test/jest/tests/QBtn-demo.spec.ts ● Test suite failed to run

Cannot find module 'vue-template-compiler' from 'node_modules/@quasar/quasar-app-extension-testing-unit-jest/node_modules/@vue/test-utils/dist/vue-test-utils.js'

Require stack:
  node_modules/@quasar/quasar-app-extension-testing-unit-jest/node_modules/@vue/test-utils/dist/vue-test-utils.js
  node_modules/@quasar/quasar-app-extension-testing-unit-jest/dist/create-local-quasar.js
  node_modules/@quasar/quasar-app-extension-testing-unit-jest/dist/mount-quasar.js
  node_modules/@quasar/quasar-app-extension-testing-unit-jest/dist/index.js
  test/jest/__tests__/QBtn-demo.spec.ts

  at Resolver.resolveModule (node_modules/jest-resolve/build/index.js:306:11)

FAIL test/jest/tests/App.spec.ts ● Test suite failed to run

test/jest/__tests__/App.spec.ts:1:10 - error TS2305: Module '"@vue/test-utils"' has no exported member 'createLocalVue'.

1 import { createLocalVue, mount } from '@vue/test-utils';
           ~~~~~~~~~~~~~~
test/jest/__tests__/App.spec.ts:3:10 - error TS2305: Module '"vue"' has no exported member 'VueConstructor'.

3 import { VueConstructor } from 'vue';
           ~~~~~~~~~~~~~~
test/jest/__tests__/App.spec.ts:35:37 - error TS2769: No overload matches this call.
  The last overload gave the following error.
    Argument of type '{ localVue: any; }' is not assignable to parameter of type 'MountingOptions<(({ [x: number]: string; } & { length?: number | undefined; toString?: string | undefined; toLocaleString?: string | undefined; concat?: string[] | undefined; join?: string | undefined; ... 15 more ...; includes?: ((searchElement: string, fromIndex?: number | undefined) => boolean) | undefined; }) | ...'.
      Object literal may only specify known properties, and 'localVue' does not exist in type 'MountingOptions<(({ [x: number]: string; } & { length?: number | undefined; toString?: string | undefined; toLocaleString?: string | undefined; concat?: string[] | undefined; join?: string | undefined; ... 15 more ...; includes?: ((searchElement: string, fromIndex?: number | undefined) => boolean) | undefined; }) | ...'.

35   const wrapper = mount(QBtnDemo, { localVue });
                                       ~~~~~~~~

  node_modules/@vue/test-utils/dist/mount.d.ts:25:25
    25 export declare function mount<PropsOptions extends Readonly<ComponentPropsOptions>, RawBindings, D, C extends ComputedOptions = {}, M extends Record<string, Function> = {}, E extends EmitsOptions = Record<string, any>, Mixin extends ComponentOptionsMixin = ComponentOptionsMixin, Extends extends ComponentOptionsMixin = ComponentOptionsMixin, EE extends string = string>(componentOptions: ComponentOptionsWithObjectProps<PropsOptions, RawBindings, D, C, M, E, Mixin, Extends, EE>, options?: MountingOptions<ExtractPropTypes<PropsOptions> & PublicProps, D>): VueWrapper<ComponentPublicInstance<ExtractPropTypes<PropsOptions>, RawBindings, D, C, M, E, VNodeProps & ExtractPropTypes<PropsOptions>>>;
                               ~~~~~
    The last overload is declared here.
test/jest/__tests__/App.spec.ts:39:22 - error TS2339: Property 'increment' does not exist on type 'ComponentPublicInstance<unknown, {}, {}, {}, {}, {}, unknown, {}, false, ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>>'.

39     expect(typeof vm.increment).toBe('function');
                        ~~~~~~~~~
test/jest/__tests__/App.spec.ts:49:22 - error TS2339: Property 'counter' does not exist on type 'ComponentPublicInstance<unknown, {}, {}, {}, {}, {}, unknown, {}, false, ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>>'.

49     expect(typeof vm.counter).toBe('number');
                        ~~~~~~~
test/jest/__tests__/App.spec.ts:51:24 - error TS2339: Property 'counter' does not exist on type '{}'.

51     expect(defaultData.counter).toBe(0);
                          ~~~~~~~
test/jest/__tests__/App.spec.ts:57:15 - error TS2339: Property 'counter' does not exist on type 'ComponentPublicInstance<unknown, {}, {}, {}, {}, {}, unknown, {}, false, ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>>'.

57     expect(vm.counter).toBe(1);
                 ~~~~~~~

Test Suites: 2 failed, 2 total Tests: 0 total Snapshots: 0 total Time: 3.408 s Ran all test suites. error Command failed with exit code 1. info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.`

I encounter an exactly same issue.

[IlCallo]

I thought comments in other issues and on the ROADMAP were already clear, but I'll explicitly state it again:

Testing AE still hasn't been migrated to Qv2 / Vue3

We were pretty busy finalising Qv2 stable release, which will come soon :) I plan to work on this in May.

[LaurenceHo]

I thought comments in other issues and on the ROADMAP were already clear, but I'll explicitly state it again:

Testing AE still hasn't been migrated to Qv2 / Vue3

We were pretty busy finalising Qv2 stable release, which will come soon :) I plan to work on this in May.

Thanks for letting us know. It's clear now. :)

[IlCallo]

Hi everyone! A new major version for Cypress testing AE has been released as beta, notable changes:

• support Qv2, drop Qv1
• updated Cypress to 7.x
• Quasar helper commands and related types are now exported directly from the package

See release notes here: https://github.com/quasarframework/quasar-testing/releases/tag/4.0.0-beta.1

I'll rename the issue to let everyone know only Jest is missing now.

---

For Jest testing AE things are more complicated, but the new version will come in some weeks too

[Anan1218]

Any updates on when the new version solving the Jest AE will come out? I'm facing the same issues now and I'm wondering if there's any alternative quick fixes. Thanks!

[IlCallo]

The alternative is to manually integrate Jest following vue-test-utils and vue-jest guides I'm still working on it, as the whole repo structure need a refactoring

[lizhongyue248]

Hi, What's the progress?

I need to test for project of vue3 / Quasar v2.

Try to use quasar ext add @quasar/testing@beta, but test get error:

 Cannot find module 'vue-template-compiler' from 'node_modules/@quasar/quasar-app-extension-testing-unit-jest/node_modules/@vue/test-utils/dist/vue-test-utils.js'

    Require stack:
      node_modules/@quasar/quasar-app-extension-testing-unit-jest/node_modules/@vue/test-utils/dist/vue-test-utils.js
      node_modules/@quasar/quasar-app-extension-testing-unit-jest/dist/create-local-quasar.js
      node_modules/@quasar/quasar-app-extension-testing-unit-jest/dist/mount-quasar.js
      node_modules/@quasar/quasar-app-extension-testing-unit-jest/dist/index.js
      test/jest/__tests__/QBtn-demo.spec.ts

quasar-app-extension-testing-unit-jest vue version is ^2.6.12.

[IlCallo]

quasar ext add @quasar/testing@beta won't list Jest AE option (and won't work) as the latter still hasn't been released.

You can follow the development on https://github.com/quasarframework/quasar-testing/tree/next branch. I got quite far and got a working setup which minimize the code and docs on our side, but the upstream deps (@vue/test-utils and vue-jest) are lagging a bit behind.

There'll be quite a lot of changes, as mountQuasar won't be needed anymore: the new mount helper from upstream test utils natively supports many use cases which we were covering on our side with mountQuasar helper, so we can remove it entirely. I'm writing a migration guide as I proceed, to ease the update.

I'm currently waiting for @vue/test-utils maintainer to jump in a call with me and check out together if the solutions I found are the optimal ones or not. Making mountFactory work while keeping the correct typings is a bit of a pain, so I'll need to discuss with him if he likes the idea of integrating the "factory" concept into the upstream deps, or find another way to manage it on my own. We also need to export a new Quasar CJS build from Quasar package, as the current one is meant to work with SSR codebases.

I'll release an early alpha in some weeks, as soon as we solve these problems

[wreality]

@IlCallo I'm happy to volunteer some effort on documentation updates if that would prove to be useful.

[IlCallo]

Docs updates aren't the real problem here, but surely I'd appreciate a check after I release it, as I'm not an English native speaker and often make mistakes.

@wreality would you be interested in helping to write some code too? There's a lot of requests asking how to test some of the most technically complex Quasar components (Dialogs and Menus in particular) and we surely can use an help in researching what's the best way to do so and either explain it into the docs or provide an helper

In general, if someone is up to help (past this migration phase for which we need to coordinate with others Vue ecosystem maintainers), just drop me a message on Discord and I can assure you I'll have something for you :P

Eg. we are planning to start adding tests to Quasar UI repo after we complete the Jest AE migration, and that would need a lot of labor :D

[wreality]

@IlCallo Yep, I'd be happy to help. I'll figure out this discord thing everyone's talking about and drop you a line.

[IlCallo]

Hey there, a new major version for Jest testing AE has been released as alpha

See release notes here: https://github.com/quasarframework/quasar-testing/releases/tag/unit-jest%40v3.0.0-alpha.3

I'm gonna close this issue, report any problem into a new issue!