nx: nx test: Jest unit tests are failing to run in any test that has been imported from other libraries.

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

Solutions tested:

• Changing globals ts-jest and vue-jest file url to add <rootDir>
• Using global setup
• Adding more transform regExp
• Modifying jest.preset.js
• NX Migration to the latest
• Installing jest via Yarn
• 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/nrwl/nx/issues/8323 https://github.com/nrwl/nx/issues/7844 https://github.com/nrwl/nx/issues/8354 https://github.com/nrwl/nx/issues/9825 https://github.com/ionic-team/ionic-framework/issues/25223

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

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

Here you can find a minimal repository to reproduce the issue:

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

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.

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