Module not found: Can't resolve imported dependency "./commands"

[khteh]

Software version

OS: Ubuntu 23.10
Node: 21.5.0
NPM: 10.4.0
Any other software related to your bug:

What did you get as the error?

n run test:component and n run test:component:ci hits the error of failing to resolve test/cypress/support/commands.ts

What were you expecting?

n run test:component and n run test:component:ci run successfully

What steps did you take, to get the error?

https://github.com/khteh/quasar

[IlCallo]

Again and again: we can't help you without a repro, nor an error message, nor anything
AFAIK those commands work flawlessly and we use them everyday in our day job
Either pin-point a way to reproduce that issue, or we simply don't know how to help you

To reduce the scope, you could try reproducing the same problem on a machine using Node 20 and Ubuntu 22.04 (LTS) and see if that's the cause of your many problems

[IlCallo]

I took a look at your repo

It's hard even to decide where to start from, it's a total mess

• app-webpack v3 don't support TS5, you force-installed it and expected it to work without problems. One of such problems is this: Does not play well with TypeScript 5 - Various TypeErrors TypeStrong/fork-ts-checker-webpack-plugin#797 (found as first result on Google searching the Performance error you posted in another issue). app-webpack v3 is already exposing its TS4 version and you should rely on that
• you messed up the tsconfig so hard that it's barely understandable what you were trying to do. Overriding compilerOptions.paths made TS blind to Quasar default aliases, then at least 3-4 other options generated problems on their own, and finally you removed compilerOptions.baseUrl which is the only important option you should have there
• you're applying random babel presets, including @babel/preset-env which is already applied by Quasar own babel package
• you have bunches of unused deps which are messing with peerDeps resolution mechanism
• you're using NPM, which is notoriously bad in managing deps, which is causing other problems on its own
• you're importing components without .vue extension, breaking imports
• you removed the shim vue file which allowed to provide a type to imports ending with .vue
• you're using '@vue/test-utils' directly, instead of relying on VueTestUtils from cypress/vue package (breaking change from Cypress 10)
• you're using TS on a codebase which is mainly JS, and without types even in TS files, causing all kind of TS errors
• you're using Jest helpers globally instead of importing them from @jest/globals, causing type clashes between testing frameworks
• you're using JEST into CYPRESS tests

Your project is currently so messed up that it cannot be fixed
Please generate a clean new project, re-add Cypress and Jest AEs and move in your files and configuration bit by bit, fixing problems as you find them

I'd also suggest to get back and study again TS, Cypress and Jest, because it's pretty clear you have a lot of confusion about how these technologies work

I'll close all your issues, please do not open new ones unless you can provide a repro based on a CLEAN Quasar installation
Every issue without such repro will be immediately closed as wontfix

[khteh]

I hit the SyntaxError: Cannot use import statement outside a module using the default tsconfig.json when running yarn test:unit. What should I do?

$ y test:unit
yarn run v1.22.19
$ jest
 FAIL  test/jest/__tests__/pages/Firestore.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/FireStore.vue:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,jest){import "core-js/modules/es.array.push.js";
                                                                                      ^^^^^^

    SyntaxError: Cannot use import statement outside a module

      4 | import { mount, shallowMount } from '@vue/test-utils';
      5 | import { QBtn, } from 'quasar'; // <= cherry pick only the components you actually use
    > 6 | import FireStorePage from '../../../../src/pages/FireStore.vue'; // <= note the absence of `.vue` extension, here we are importing the JS/TS part of a Double File Component
        | ^
      7 | installQuasarPlugin();
      8 | describe.skip('Firestore page tests', () => {
      9 |     let wrapper = null;

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

[IlCallo]

provide a repro based on a CLEAN Quasar installation

Please read up this: https://antfu.me/posts/why-reproductions-are-required

[khteh]

https://github.com/khteh/Quasar

[khteh]

yarn build hits the following error:

y build
yarn run v1.22.19
$ QENV=production quasar build

 .d88888b.
d88P" "Y88b
888     888
888     888 888  888  8888b.  .d8888b   8888b.  888d888
888     888 888  888     "88b 88K          "88b 888P"
888 Y8b 888 888  888 .d888888 "Y8888b. .d888888 888
Y88b.Y8b88P Y88b 888 888  888      X88 888  888 888
 "Y888888"   "Y88888 "Y888888  88888P' "Y888888 888
       Y8b


 Build mode................ spa
 Pkg quasar................ v2.14.3
 Pkg @quasar/app-webpack... v3.12.3
 Pkg webpack............... v5
 Debugging................. no
 Publishing................ no

 Configured browser support (>= 84.04% of global marketshare):
 · Chrome for Android >= 121
 · Firefox for Android >= 122
 · Android >= 121
 · Chrome >= 112
 · Edge >= 118
 · Firefox >= 113
 · iOS >= 16.1
 · Opera >= 102
 · Safari >= 16.4

 App • Running "@quasar/testing-unit-jest" Quasar App Extension...
 App • Running "@quasar/testing-e2e-cypress" Quasar App Extension...
 App • Running "@quasar/qenv" Quasar App Extension...
 App • Extension(@quasar/qenv): Extending quasar.config.js...
 App • Cleaned build artifact: "/usr/src/quasar/dist/spa"
 App •  WAIT  • Compiling of "UI" in progress...
 App •  DONE  • "UI" compiled with errors • 6719ms

 App •  ERROR  •  UI  in test/jest/__tests__/pages/AutoGenerate.spec.ts:17:22

TS2339: Property 'vm' does not exist on type 'WrapperLike'.
    15 |     const btnToggle = autoGenerate.findComponent('[data-test="toggle-setting-0"]');
    16 |     expect(btnToggle.exists()).toBeTruthy();
  > 17 |     expect(btnToggle.vm.btnToggleModel).toEqual(false);
       |                      ^^
    18 |     await btnToggle.trigger('click');
    19 |     expect(btnToggle.vm.btnToggleModel).toEqual(true);
    20 |     const popUpEdit = autoGenerate.findComponent('[data-test="popup-edit-setting-1"]');
<snip>