Make @quasar/quasar-app-extension-testing-unit-jest support Quasar 2.16.0+ about quasar-testing

[antonio-masotti]

@pierre-jochem FYI

[antonio-masotti]

In our case we blocked quasar to 2.15.4 for the moment, which is suboptimal.

@IlCallo Is there any chance that quasar reintroduces the ESM module? I don't see any disadvantages in having it both compiled as Universal module (UMD) as it is now and as ESM module, especially since ESM are the de facto standard in the JS / TS Ecosystem.

Reintroducing the file, would immediately solve the issue. Otherwise, we will have to see how to instruct jest to work with UMD modules, which maybe quite difficult, if possible at all.

[whoacowboy]

We solved the issue the same way, locked quasar to 2.12.3. @IlCallo I agree it would be really helpful to reintroduce the ESM module.

[IlCallo]

I'd say we need to update that, feel free to send a PR

[IlCallo]

@antonio-masotti what happens if you remove the mapper altogether?

[antonio-masotti]

@antonio-masotti what happens if you remove the mapper altogether?

Not sure I understand what you mean

The mapper in our own project is needed to resolve paths with alias (e.g. '^@/validators/(.*)$': '<rootDir>/src/validators/$1',), but the problem is in the jest-preset.mjs in the node_modules/@quasar/quasar-app-extension-testing-unit-jest.

This is the line causing the error.

Removing our mapper would hinder the tests to resolve the imports that use aliases. Removing that line would of course break many if not all quasar-related functionalities.

[whoacowboy]

@antonio-masotti @IlCallo
I removed the reference and it now runs my Pinia tests but errors a few imports

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

    TypeError: [BABEL]: _lruCache is not a constructor (While processing: node_modules/@babel/preset-env/lib/index.js)

      3 | import { createLocalVue, mount, shallowMount } from '@vue/test-utils'
      4 |
    > 5 | import QBUTTON from './demo/QBtn-demo.vue'
        | ^
      6 |
      7 | const { Quasar } = All
      8 |

      at Object.<anonymous> (node_modules/@babel/preset-env/node_modules/@babel/helper-compilation-targets/src/index.ts:173:22)
      at Object.require (node_modules/@babel/preset-env/src/debug.ts:1:1)
      at Object.require (node_modules/@babel/preset-env/src/index.ts:2:1)
      at transform (node_modules/@babel/core/src/transform.ts:56:56)
      at processTemplate (node_modules/@vue/vue3-jest/lib/process.js:138:20)
      at Object.module.exports [as process] (node_modules/@vue/vue3-jest/lib/process.js:166:26)
      at Object.require (test/jest/__tests__/App.spec.js:5:1)

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

    TypeError: [BABEL]: _lruCache is not a constructor (While processing: node_modules/@babel/preset-env/lib/index.js)

      2 | import { installQuasarPlugin } from '@quasar/quasar-app-extension-testing-unit-jest';
      3 | import { DOMWrapper, mount } from '@vue/test-utils';
    > 4 | import MyDialog from './demo/MyDialog';
        | ^
      5 |
      6 | installQuasarPlugin();
      7 |

      at Object.<anonymous> (node_modules/@babel/preset-env/node_modules/@babel/helper-compilation-targets/src/index.ts:173:22)
      at Object.require (node_modules/@babel/preset-env/src/debug.ts:1:1)
      at Object.require (node_modules/@babel/preset-env/src/index.ts:2:1)
      at transform (node_modules/@babel/core/src/transform.ts:56:56)
      at processTemplate (node_modules/@vue/vue3-jest/lib/process.js:138:20)
      at Object.module.exports [as process] (node_modules/@vue/vue3-jest/lib/process.js:166:26)
      at Object.require (test/jest/__tests__/MyDialog.spec.js:4:1)    

Any ideas? Once I get this straightened, I'd be happy to submit a PR.

[antonio-masotti]

@whoacowboy What you described in #375 is what I meant with

Removing our mapper would hinder the tests to resolve the imports that use aliases. Removing that line would of course break many if not all quasar-related functionalities.

[whoacowboy]

@antonio-masotti Indeed it did break everything. And now I am finally able to read your last sentence.

I tried linking to quasar/dist/quasar.umd.js and that gave me the below error. Linking to quasar/dist/quasar.server.prod.js gave me a similar error to #375.

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

    TypeError: Cannot destructure property 'h' of 'window.Vue' as it is undefined.

      1 | import { describe, expect, it } from '@jest/globals';
    > 2 | import { installQuasarPlugin } from '@quasar/quasar-app-extension-testing-unit-jest';
        | ^
      3 | import { mount, shallowMount } from '@vue/test-utils';
      4 | import { QBtn } from 'quasar';
      5 | import MyButton from './demo/MyButton';

      at h (node_modules/quasar/dist/quasar.umd.js:15:9)
      at Object.<anonymous> (node_modules/quasar/dist/quasar.umd.js:31367:2)
      at Object.<anonymous> (node_modules/@quasar/quasar-app-extension-testing-unit-jest/src/helpers/install-quasar-plugin.ts:4:1)
      at Object.<anonymous> (node_modules/@quasar/quasar-app-extension-testing-unit-jest/src/helpers/main.ts:1:1)
      at Object.require (test/jest/__tests__/MyButton.spec.js:2:1)

I need to come up with some sort of work around for this for our current project. I'll post back what I find or which way we go.