Jest/Ionic 4 beta - import { Platform } from '@ionic/angular'; gets SyntaxError: Unexpected token export in Jest testing, not Ionic

Question

When running Jest against the base package, I get an error in Jest in running the test, which does not appear when simply running ionic serve. Jest gets an error on

import { Platform } from '@ionic/angular';

which is:

export { IonicModule } from './ionic-module';
^^^^^^

SyntaxError: Unexpected token export

  3 | import { RouterTestingModule } from '@angular/router/testing';
  4 |
> 5 | import { Platform } from '@ionic/angular';
    | ^
  6 | import { SplashScreen } from '@ionic-native/splash-screen/ngx';
  7 | import { StatusBar } from '@ionic-native/status-bar/ngx';
  8 |

  at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/script_transformer.js:403:17)
  at Object.<anonymous> (src/app/app.component.spec.ts:5:1)

My Jest.config.json

module.exports = {
    collectCoverage: true,
    collectCoverageFrom: [
        "src/**/*.ts"
    ],
    coverageDirectory: "<rootDir>/coverage/",
    moduleNameMapper: {
        "@core/(.*)": "<rootDir>/src/app/core/$1",
        "@state/(.*)": "<rootDir>/src/app/state/$1"
    },
    preset: "jest-preset-angular",
    roots: ['src'],
    setupTestFrameworkScriptFile: "<rootDir>/src/setup-jest.ts",
    transformIgnorePatterns: [
        "node_modules/(?!(@ionic-native|@ionic|angularfire2)/)"
    ],
    verbose: false  
}

I am just using the sample side menu template and adjusting the components to run Jest.

Answer 1

Seeing all answers being quite long I have decided to give show what worked for me after reading Jest unit testing no longer works with Ionic 4.

To make it work you need to add to jest.config.ts:

transformIgnorePatterns: [
  "node_modules/(?!@ionic-native|@ionic)"
],

And in tsconfig.spec.json set:

"compilerOptions": {
  "allowJs": true,
},

Answer 2

This issue appears when some file needs to be preprocessed before it can be used in Jest. In this case the ionic imports needs to be preprocessed but normally is ignored via the transformIgnorePatterns. But this is half the issue. We also need to add some babel to process the files so that they can run.

I was able to solve this issue by adding a .babelrc file with the following config

{ 
     "presets": [["@babel/preset-env", {
        "modules": "commonjs",
        "targets": {
          "node": "current"
        }
      }]],
      "plugins": ["transform-export-extensions", "@babel/plugin-transform-runtime"]
}

I used the following jest config

{
    "jest": {
        "preset": "jest-preset-angular",
        "setupTestFrameworkScriptFile": "<rootDir>/src/setup-jest.ts",
        "globals": {
        "ts-jest": {
            "tsConfigFile": "tsconfig.jest.json",
            "useBabelrc": true
        },
        "__TRANSFORM_HTML__": true
    },
    "transformIgnorePatterns": [
      "node_modules/(?!@ngrx|angular2-ui-switch|ng-dynamic|@ionic|@ionic-native)"
    ],
    "moduleFileExtensions": [
      "ts",
      "tsx",
      "js",
      "jsx",
      "json",
      "node"
    ]
  }
}

The src/tsconfig.spec.json also needed some minor adjustment.

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/spec",
    "baseUrl": "./",
    "module": "commonjs",
    "allowJs": true,
    "types": [
      "jest",
      "jquery",
      "jsdom",
      "node"
    ]
  }, 
  "include": [
    "polyfills.ts",
    "**/*.spec.ts",
    "**/*.d.ts"
  ]
}

Answer 3

Your answer didn't work for me. However, I noticed that removing the extra parenthesis got rid of the error. Try changing:

transformIgnorePatterns: [
    "node_modules/(?!(@ionic-native|@ionic|angularfire2)/)"
],

to

transformIgnorePatterns: [
    "node_modules/(?!@ionic-native|@ionic|angularfire2)"
],

For me, though, this now brings a new error:

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)

This was all working fine until I upgraded to Ionic 4 beta 11 (from beta 8). I am also now using Jest 23.6.0 but it fails in Jest 23.5.0 as well.

I get these errors with or without your babelrc config.

For reference, here is my ionic info:

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