search

quasarframework / quasar-testing

Testing Harness App Extensions for the Quasar Framework 2.0+
https://testing.quasar.dev
MIT License
179 stars 66 forks source link

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

Closed antonio-masotti closed 4 weeks ago

antonio-masotti commented 2 months ago

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:

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 commented 2 months ago

@pierre-jochem FYI

IlCallo commented 2 months ago

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

IlCallo commented 2 months ago

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

antonio-masotti commented 2 months ago

@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 commented 2 months ago

@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 commented 2 months ago

@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 commented 2 months ago

@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 commented 2 months ago

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 commented 2 months ago

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 commented 4 weeks ago

Fixed into 3.0.0 release