search

ionic-team / ionic-framework

A powerful cross-platform UI toolkit for building native-quality iOS, Android, and Progressive Web Apps with HTML, CSS, and JavaScript.
https://ionicframework.com
MIT License
51.07k stars 13.51k forks source link

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

Closed marimendez88 closed 2 years ago

marimendez88 commented 2 years ago

Prerequisites

Ionic Framework Version

Current Behavior

An NX - Ionic and Vue workspace fails to run tests, many solutions are tested and any seems to fix the issue: Screen Shot 2022-05-20 at 08 49 27

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:

Resources:

Related Issues:

Investigation made:

Collaboration with: @Ricardo385

liamdebeasi commented 2 years ago

Hey there!

I see this is a follow up from our last correspondence in https://github.com/ionic-team/ionic-framework/issues/25223. As per https://github.com/ionic-team/ionic-framework/issues/25223#issuecomment-1115315040, are you able to provide a minimal reproduction that only uses Vue + Ionic without any 3rd party plugins (including Nx)?

With Ionic 6, you need to use transformIgnorePatterns so that Jest can downlevel Ionic's ES Modules to CommonJS (CJS): https://ionicframework.com/docs/intro/upgrading-to-ionic-6#testing. This works reliably in in Ionic Vue starter applications, which is why I suspect there is something wrong with your application setup.

marimendez88 commented 2 years ago

Hey @liamdebeasi , already tried the solution ionic provided us but still not luck..

The issue I am facing is this one:

    Details:

    /Users/mjmendez/Desktop/Code/OpenForge/Panorama-ed/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 passed, 2 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        6.349 s
Ran all test suites.

The solution is listed here https://ionicframework.com/docs/intro/upgrading-to-ionic-6#testing still not work!

I will try to get a new repo without any nx example soon!

marimendez88 commented 2 years ago

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!

marimendez88 commented 2 years ago

Hey, Just wanted to let you know I found a workaround, is working pretty well so far, let's see how it goes in the next weeks when I start creating new tests ;) I just posted what I did here:

https://www.marimendez88.dev/posts/nx-vue-jest-support and medium: https://medium.com/@marimendez88/nx-vue-jest-support-666156038122

liamdebeasi commented 2 years ago

Glad to hear things are working. It sounds like the original project posted here was misconfigured, which resulted in the transformIgnorePatterns not working.

ionitron-bot[bot] commented 2 years ago

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!