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

Prerequisites

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

Ionic Framework Version

• v4.x
• v5.x
• v6.x
• Nightly

Current Behavior

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

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:
  /Users/ricardomadrid/Documents/openforge/of-jest-issue/node_modules/@ionic/core/components/ion-accordion.js:4
  import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
  ^^^^^^
  SyntaxError: Cannot use import statement outside a module
   at Runtime.createScriptFromCode (../../node_modules/jest-runtime/build/index.js:1728:14)
Test Suites: 1 failed, 1 total
Tests:    0 total
Snapshots:  0 total
Time:    3.398 s
Ran all test suites.
 ————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————
 >  NX  Ran target test for project sample-lib (4s)
 
  ✖  1/1 failed
  ✔  0/1 succeeded [0 read from cache]

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

Create empty workspace: Run npx create-nx-workspace@^13.0.0 select → apps option Install testing dependencies: npm install @nrwl/cypress@^13.0.0 @nrwl/jest@^13.0.0 @nrwl/linter@^13.0.0 --save-dev Install nx vue plugin : npm install @nx-plus/vue --save-dev Creating sample app: nx g @nx-plus/vue:app sample-app Install ionic npm i @ionic/vue npm i @ionic/vue-router Update main.ts under sample-app to use ionic Creating sample lib nx g @nx-plus/vue:lib sample-lib Create a header test component under sample-lib Import the header component into the sample app to use it Successfully served and components are shown as expected 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/25223
• 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 https://github.com/ionic-team/ionic-framework/issues/24026 managed to solve the problem.
• NX receive the issue reported on Jan 26: https://github.com/nrwl/nx/issues/8709.
• 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

Collaboration with: @Ricardo385

[marimendez88]

Hey @liamdebeasi , thank you, I already did the steps mentioned but still no luck, I will try to provide a ionic - vue repo as soon as I can!

[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!