bug: Ionic Vue -> Jest unit tests are failing to run in any test

[marimendez88]

Prerequisites

• [X] I have read the Contributing Guidelines.
• [X] I agree to follow the Code of Conduct.
• [X] I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

• [ ] v4.x
• [ ] v5.x
• [X] v6.x
• [ ] Nightly

Current Behavior

An NX - Ionic and Vue workspace fails to run tests, many solutions tested and any seems to fix the issue:

This is the error message:

  ● 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

AND:

Expected Behavior

• Ability to run any unit tests without issues
• Ability to run the test without any other configuration to ignore patterns or support nx libraries

Steps to Reproduce

1. Create empty workspace: Run npx create-nx-workspace@^13.0.0
2. select → apps option
3. Install testing dependencies: npm install @nrwl/cypress@^13.0.0 @nrwl/jest@^13.0.0 @nrwl/linter@^13.0.0 --save-dev
4. Install nx vue plugin : npm install @nx-plus/vue --save-dev
5. Creating sample app: nx g @nx-plus/vue:app sample-app
6. Install ionic npm i @ionic/vue npm i @ionic/vue-router
7. Update main.ts under sample-app to use ionic
8. Creating sample lib nx g @nx-plus/vue:lib sample-lib
9. Create a header test component under sample-lib
10. Import the header component into the sample app to use it
11. Successfully served and components are shown as expected
12. Run a test, error happens.

Code Reproduction URL

https://github.com/marimendez88/of-jest-issue

Ionic Info

Ionic:

   Ionic CLI : 6.16.3

Utility:

   cordova-res : not installed globally
   native-run  : not installed globally

System:

   NodeJS : v14.17.1
   npm    : 6.14.13
   OS     : macOS Monterey

Additional Information

Failure Logs

This is the error message:

  ● 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:

    /of-jest-issue/apps/sample-app/src/components/HelloWorld.vue:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,jest){import { defineComponent } from 'vue';
                                                                                      ^^^^^^

    SyntaxError: Cannot use import statement outside a module

      1 | import { shallowMount } from '@vue/test-utils';
    > 2 | import HelloWorld from '../../src/components/HelloWorld.vue';
        | ^
      3 |
      4 | describe('HelloWorld.vue', () => {
      5 |   it('renders props.msg when passed', () => {

      at Runtime.createScriptFromCode (../../node_modules/jest-runtime/build/index.js:1728:14)
      at Object.<anonymous> (tests/unit/example.spec.ts:2:1)

Test Suites: 1 failed, 1 total
Tests:       0 total
Snapshots:   0 total
Time:        5.015 s
Ran all test suites.

Environment

 >  NX   Report complete - copy this into the issue template

   Node : 14.17.1
   OS   : darwin x64
   npm  : 6.14.13

   nx : 13.10.3
   @nrwl/angular : Not Found
   @nrwl/cypress : 13.10.3
   @nrwl/detox : Not Found
   @nrwl/devkit : 13.10.3
   @nrwl/eslint-plugin-nx : 13.10.3
   @nrwl/express : Not Found
   @nrwl/jest : 13.10.3
   @nrwl/js : Not Found
   @nrwl/linter : 13.10.3
   @nrwl/nest : Not Found
   @nrwl/next : Not Found
   @nrwl/node : Not Found
   @nrwl/nx-cloud : Not Found
   @nrwl/nx-plugin : Not Found
   @nrwl/react : Not Found
   @nrwl/react-native : Not Found
   @nrwl/schematics : Not Found
   @nrwl/storybook : Not Found
   @nrwl/web : Not Found
   @nrwl/workspace : 13.10.3
   typescript : 4.6.4
   rxjs : 6.6.7
   ---------------------------------------
   Community plugins:
     @nx-plus/vue: 13.0.1

Solutions tested:

• Changing globals ts-jest and vue-jest file url to add
• Using global setup
• Adding more transform regExp
• Modifying jest.preset.js
• Installing jest via Yarn
• Implementing jest migration for vue projects described here: https://github.com/ionic-team/ionic-framework/issues/24026#issuecomment-963243616
• using Official NX ‘Solution’, with no success ‘Global setup/teardown with nx libraries’
  • Resources:
    • Official NX util that seems to solve the issue: https://github.com/nrwl/nx/blob/master/packages/nx/src/utils/register.ts
    • Official discussion from NX team:
    • https://github.com/nrwl/nx/pull/9145/files#r830371514
• NX workspace with Jest implementation ‘issue guide’: https://lifesaver.codes/answer/nx-workspace-with-jest-implementation
• used tsconfig-paths register to [map libraries](https://www.npmjs.com/package/tsconfig-paths#register) into jest.config.ts files, mapper working but jest resolver found the match undefined.
• Changing "type"="module" in package.json with no success

Related Issues:

https://github.com/ionic-team/ionic-framework/issues/24026 https://github.com/nrwl/nx/issues/10100

Investigation made:

• Ionic has a known issue with JEST not ignoring the transform files, none of the solutions listed on the official thread managed to solve the problem.
• NX receive the issue reported on Jan 26: [JEST] globalSetup and globalTeardown.
  • Repo to reproduce is not accessible
  • Repo with the solution ‘fixed’ by NX team member not accessible.
  • Followed the video example and still not luck.
  • Commit with documentation on NX official page
  • (https://github.com/nrwl/nx/commit/1b9edfe3c2c730add26f8b9fc5bd78965bdbf871), and is vaguely understandable, the import { registerTsProject } from 'nx/src/utils/register'; always mark an error because is not recognizable.
• NX has a know issue with JEST, no matter is vue , react or angular: Jest doesn’t recognize the @relative/path by NX.
• Other issues opened by the community pointing is a know issue within nx / jest / ionic interaction: https://stackoverflow.com/questions/60156780/syntaxerror-cannot-use-import-statement-outside-a-module-using-ionic-native-he

[liamdebeasi]

Thanks for the issue. I do not see anything in the error log that would indicate that this is an Ionic issue. The error appears to be coming from within your project code, not Ionic's code.

Are you able to provide a minimal reproduction that only uses Vue + Ionic without the Nx plugins?

[ionitron-bot[bot]]

Thanks for the issue! This issue is being closed due to the lack of a reply. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.

Thank you for using Ionic!