Jest unit testing no longer works with Ionic 4 beta 9-11

[russcarver]

Bug Report

Ionic Info
Run ionic info from a terminal/cmd prompt and paste the output below.

Ionic:

   ionic (Ionic CLI)          : 4.1.2
   Ionic Framework            : @ionic/angular 4.0.0-beta.11
   @angular-devkit/core       : 0.8.3
   @angular-devkit/schematics : 0.8.3
   @angular/cli               : 6.2.3
   @ionic/ng-toolkit          : 1.0.7
   @ionic/schematics-angular  : 1.0.6

Cordova:

   cordova (Cordova CLI) : 7.1.0
   Cordova Platforms     : none
   Cordova Plugins       : no whitelisted plugins (0 plugins total)

System:

   Android SDK Tools : 26.1.1 (/Users/rc101077/Library/Android/sdk)
   ios-deploy        : 2.0.0
   ios-sim           : 7.0.0
   NodeJS            : v8.11.4 (/Users/rc101077/.nvm/versions/node/v8.11.4/bin/node)
   npm               : 6.4.1
   OS                : macOS High Sierra
   Xcode             : Xcode 9.4.1 Build version 9F2000

Describe the Bug
Jest unit testing no longer works with Ionic 4 beta 9. An error appears for each spec file that relies on Ionic as such:

Cannot find module '@ionic/core/loader' from 'app-initialize.js'
  at Resolver.resolveModule (node_modules/jest-resolve/build/index.js:221:17)
  at Object.<anonymous> (node_modules/@ionic/angular/dist/app-initialize.js:1:1)

Steps to Reproduce
Steps to reproduce the behavior:

1. Create an Ionic project with a Jest unit test setup (Jest version 22+)
2. Run the unit tests
3. See the error above for every file using Ionic imports

Expected Behavior
There should be no errors and all the unit tests should pass.

Additional Context
This looks to be broken with Ionic 4 beta 9, 10 and 11. It works fine in beta 8.

[tja4472]

• Create blank file, <rootDir>/node_modules/@ionic/core/loader/loader.ts

• Add the following to package.json, moduleNameMapper

  "^@ionic/core/loader":"<rootDir>/node_modules/@ionic/core/loader/loader.ts"

My package.json Jest config

  "jest": {
    "preset": "jest-preset-angular",
    "setupTestFrameworkScriptFile": "<rootDir>/src/setupJest.ts",
    "moduleNameMapper": {
      "^@app/(.*)": "<rootDir>/src/app/$1",
      "^@ionic/core/loader": "<rootDir>/node_modules/@ionic/core/loader/loader.ts"
    },
    "transformIgnorePatterns": [
      "<rootDir>/node_modules/(?!@ngrx|@ionic-native|@ionic)"
    ]
  }

[paulsouche]

Hi,

Same issue here ! That's because @ionic/core/loader package.json has no main property. Looking forward to find how to tell jest to resolve module property.

{"name":"loader","typings":"./index.d.ts","module":"../dist/esm/es5/ionic.define.js","es2017":"../dist/esm/es2017/ionic.define.js"}

EDIT

It works with

"moduleNameMapper": {
  "^@ionic/core/loader": "<rootDir>/node_modules/@ionic/core/dist/esm/es5/ionic.define.js"
},

But should be better to not add this...

[russcarver]

Thanks @paulsouche your moduleNameMapper worked for me! But I agree we shouldn't have to put this in.

[russcarver]

FYI, this problem still exists in Ionic beta 12. But in addition, the same tests in beta 12 now show this error:

 FAIL  src/app/app.component.spec.ts
  Test suite failed to run

    Cannot find module '@ionic/angular' from 'app.component.spec.ts'

       5 | import { SplashScreen } from '@ionic-native/splash-screen/ngx';
       6 | import { StatusBar } from '@ionic-native/status-bar/ngx';
    >  7 | import { Platform } from '@ionic/angular';

I've tried adding "^@ionic/angular": "<rootDir>/node_modules/@ionic/angular/dist/index", to the moduleNameMapper of Jest, but that just changes the error to:

 FAIL  src/app/app.component.spec.ts
  Test suite failed to run

    TypeError: require.context is not a function

      at Object.<anonymous> (node_modules/@ionic/core/dist/ionic/svg/index.js:1:36)
      at Object.<anonymous> (node_modules/@ionic/angular/dist/app-initialize.js:5:1)
      at Object.<anonymous> (node_modules/@ionic/angular/dist/ionic-module.js:6:24)
      at Object.<anonymous> (node_modules/@ionic/angular/dist/index.js:7:22)
      at Object.<anonymous> (src/app/app.component.spec.ts:90:17)

For now, I'm reverting back to beta 11 until a solution can be found.

[ajcrites]

Using version 11 of the beta with the suggested configuration above, I get:

    SyntaxError: Unexpected token {

from import { StatusBar } from '@ionic-native/status-bar'.

I can fix this using babel: https://stackoverflow.com/questions/52651907/unexpected-token-export-with-jest

...but then I get a very strange unexpected token error from the import loader .js files.

[russcarver]

Don't forget you need /ngx on the end of that import.

[ajcrites]

@russcarver thank you, but now I get import { Injectable } from '@angular/core';: SyntaxError: Unexpected token { in @ionic-native/status-bar/ngx/index.js:22. By any chance do you have a publicly available repository with working jest for Ionic 4?

[russcarver]

Yes! Here's a link to my Ionic4 starter repo that I've been keeping up to date over the months.

https://github.com/russcarver/ionic4-project-template

The master branch is up to date as of today and should have what you need.

[ajcrites]

Ultimately my problem was not having allowJs in my TypeScript configuration. My configurations:

Jest configuration:

module.exports = {
  preset: 'jest-preset-angular',
  setupTestFrameworkScriptFile: '<rootDir>/src/setupJest.ts',
  moduleNameMapper: {
    '^@ionic/core/loader': '<rootDir>/node_modules/@ionic/core/dist/esm/es5/ionic.define.js',
  },
  transformIgnorePatterns: [
    '<rootDir>/node_modules/(?!@ngrx|@ionic-native|@ionic|ionic-angular|@angular)',
  ],
  transform: {
    '^.+\\.(ts|js|html)$': '<rootDir>/node_modules/jest-preset-angular/preprocessor.js',
    '^.+\\.ts': '<rootDir>/node_modules/ts-jest/preprocessor.js',
  },
};

tsconfig:

{
  "compilerOptions": {
    "allowJs": true,
    "target": "esnext",
    "module": "commonjs",
    "moduleResolution": "node",
    "declaration": false,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "skipLibCheck": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": ["es6", "dom"]
  }
}

[russcarver]

Glad you figured it out!

[paulsouche]

Hi,

Since beta.12 (and in beta.13), @russcarver Error TypeError: require.context is not a function is still present. This is due to svg imports in /dist/ionic/index.js

require.context('!!file-loader?name=[name].[ext]&outputPath=svg!./', false, /.svg$/);

In beta.11 require.context was tested

if (require && require.context) {
  require.context('!!file-loader?name=[name].[ext]&outputPath=svg!./', false, /.svg$/);
}

Looking forward for a workaround trying to declare require.context in jest setup but didn't find one yet... If anyone has a clue help is really appreciated.

Thanks

[russcarver]

I put in a temporary fix for this by substituting the missing check into a replacement script loaded by Jest.

Now I have:

"moduleNameMapper": {
      "^@ionic/core/loader": "<rootDir>/node_modules/@ionic/core/dist/esm/es5/ionic.define.js",
      "^@ionic/core/dist/ionic/svg": "<rootDir>/scripts/svgoverride.js"
 },

and my svgoverride.js script is:

if (require && require.context) {
  require.context('!!file-loader?name=[name].[ext]&outputPath=svg!./', false, /.svg$/);
}

Feel free to check it out on my repo (currently master or v0.0.2). I've also updated a lot of packages to the latest:
https://github.com/russcarver/ionic4-project-template/tree/master

[picheli20]

@ajcrites love you man! :P I'm hours trying to figure out that!

[paulstelzer]

Thanks for your issue! I think you made workarounds, correct? Could you please explain how it can be fixed or maybe push a PR? Otherwise I would set it under investigation