Jest doesn't work.

[khteh]

https://github.com/quasarframework/quasar-testing/issues/361

I started a new Quasar project from scratch and migrated my files, add Jest and Cypress but still don't get Jest to work.

$ y test:unit:ci
yarn run v1.22.19
$ jest --ci
 FAIL  test/jest/__tests__/pages/AutoGenerate.spec.ts
  ● Test suite failed to run

    Jest encountered an unexpected token

    Jest failed to parse a file. This happens e.g. when your code or its dependencies use non-standard JavaScript syntax, or when Jest is not configured to support such syntax.

    Out of the box Jest supports Babel, which will be used to transform your files into valid JS based on your Babel configuration.

    By default "node_modules" folder is ignored by transformers.

    Here's what you can do:
     • If you are trying to use ECMAScript Modules, see https://jestjs.io/docs/ecmascript-modules for how to enable it.
     • If you are trying to use TypeScript, see https://jestjs.io/docs/getting-started#using-typescript
     • To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
     • If you need a custom transformation specify a "transform" option in your config.
     • If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.

    You'll find more details and examples of these config options in the docs:
    https://jestjs.io/docs/configuration
    For information about custom transformations, see:
    https://jestjs.io/docs/code-transformation

    Details:

    /usr/src/quasar/src/pages/AutoGenerate.vue:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,jest){import { defineComponent, ref } from 'vue';
                                                                                      ^^^^^^

    SyntaxError: Cannot use import statement outside a module

      3 | import { mount } from '@vue/test-utils';
      4 | import { QBtn, } from 'quasar'; // <= cherry pick only the components you actually use
    > 5 | import AutoGeneratedPage from '../../../../src/pages/AutoGenerate.vue'; // <= note the absence of `.vue` extension, here we are importing the JS/TS part of a Double File Component
        | ^
      6 | installQuasarPlugin();
      7 | describe('AutoGenerated Page tests', () => {
      8 |   it('Auto generated page from JSON should contain all the UI Elements', async () => {

      at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1505:14)
      at Object.<anonymous> (test/jest/__tests__/pages/AutoGenerate.spec.ts:5:1)

https://github.com/khteh/Quasar

Software version

OS: Ubuntu 23.10 Node: v21.5.0 NPM: 10.4.0 Any other software related to your bug:

What did you get as the error?

What were you expecting?

What steps did you take, to get the error?

[IlCallo]

You can't get Jest to work because your pages are full of runtime errors and Quasar compilation is probably breaking before even reaching Jest

E.g. if you enable TS on Fibonacci.vue you'll get an error on the computed property there, multiple errors actually. Fix the computed property definition and the test will pass

I'm sorry, but I just wasted an hour on this and the similar Cypress issue, and they ended up being, as all other issues you opened, just problems in your code and not with the library This repo isn't a Q&A forum or a free consultancy service

If you have questions, ask on Quasar Discord or on StackOverflow If you need professional support, you can get it here: https://github.com/sponsors/dreamonkey Otherwise, please don't open any more issues unless you're sure there's a bug in the libraries and you can pin-point both the problem and the solution by yourself and I just need to check it and apply the fix