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

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.

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

[GregOnNet]

I experience the same issue. Since jest-preset-angular received a major update to version 7 russcarver/ionic4-project-template stopped working for me.

I spent a little time investigating the problem and set up a new ionic project using the following package-versions

package	version
@ionic/angular	4.1
@angular-builders/jest	7.4.2
jest-preset-angular	7.1
@angular/*	7.2.2
@babel/preset-env	7.4.3

Here is the sample repository: GregOnNet/ionic-4-jest-setup

I wrote a small article discussing why @ionic/angular fails to run with Jest: How to set up Jest in an Ionic 4 project

I am glad if this helps somebody.