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

[antonio-masotti]

Software version

OS: doesn't matter (tested on MacOS and Ubuntu 21, 22)
Node: v18 and v20
NPM: 10.2.3
Any other software related to your bug:

• "quasar": "^2.16.2"
• "@quasar/app-webpack": "^4.0.0-beta.7"
• "@quasar/quasar-app-extension-testing-unit-jest": "^3.0.0-beta.7"

What did you get as the error?

@quasar/app-webpack": "^4.0.0-beta.13" and "@quasar/quasar-app-extension-testing-unit-jest": "^3.0.0-beta.7" don't seem to be compatible with the changes introduced in quasar from v.2.16.0

The @quasar/quasar-app-extension-testing-unit-jest/jest-preset.mjs searches in the moduleNameMapper for a file quasar/dist/quasar.esm.prod.js which is not there

❯ ls -al node_modules/quasar/dist/
total 5083
drwxr-xr-x  1  staff  staff       21  May  11  09:21  ./                          
drwxrwxr-x  1  staff  staff        8  May  11  09:21  ../                         
drwxr-xr-x  1  staff  staff      152  May  11  09:21  api/                        
drwxr-xr-x  1  staff  staff       39  May  11  09:21  icon-set/                   
drwxr-xr-x  1  staff  staff       68  May  11  09:21  lang/                       
-rw-r--r--  1  staff  staff    95056  May  11  09:21  quasar.addon.css            
-rw-r--r--  1  staff  staff    67064  May  11  09:21  quasar.addon.prod.css       
-rw-r--r--  1  staff  staff   146802  May  11  09:21  quasar.addon.rtl.css        
-rw-r--r--  1  staff  staff   104244  May  11  09:21  quasar.addon.rtl.prod.css   
-rw-r--r--  1  staff  staff  1039239  May  11  09:21  quasar.client.js            
-rw-r--r--  1  staff  staff   249641  May  11  09:21  quasar.css                  
-rw-r--r--  1  staff  staff   204577  May  11  09:21  quasar.prod.css             
-rw-r--r--  1  staff  staff   301074  May  11  09:21  quasar.rtl.css              
-rw-r--r--  1  staff  staff   246490  May  11  09:21  quasar.rtl.prod.css         
-rw-r--r--  1  staff  staff   211479  May  11  09:21  quasar.sass                 
-rw-r--r--  1  staff  staff   488588  May  11  09:21  quasar.server.prod.cjs      
-rw-r--r--  1  staff  staff   472887  May  11  09:21  quasar.server.prod.js       
-rw-r--r--  1  staff  staff  1077501  May  11  09:21  quasar.umd.js               
-rw-r--r--  1  staff  staff   499059  May  11  09:21  quasar.umd.prod.js          
drwxr-xr-x  1  staff  staff        4  May  11  09:21  transforms/                 
drwxr-xr-x  1  staff  staff       18  May  11  09:21  types/                      
drwxr-xr-x  1  staff  staff        2  May  11  09:21  vetur/                      
drwxr-xr-x  1  staff  staff        1  May  11  09:21  web-types/    

as result the installQuasarPlugin() fails in the tests:

   Configuration error:
    
    Could not locate module quasar mapped as:
    quasar/dist/quasar.esm.prod.js.
    
    Please check your configuration for these entries:
    {
      "moduleNameMapper": {
        "/^quasar$/": "quasar/dist/quasar.esm.prod.js"
      },
      "resolver": undefined
    }

What were you expecting?

to be able to run the tests

Reproduction URL

https://stackblitz.com/edit/quasarframework-webpack-8elbvr?file=jest.config.mjs

npm i && npm run test:unit

Are the test extensions not yet compatible with Quasar 2.16.0+ or am I using the wrong package versions?

[antonio-masotti]

@pierre-jochem FYI

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

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