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.

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.

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

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"]
  }
}

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…

Found the issue. Needs an allowJs added to the tsconfig.spec.json file.

I’ve taken another look at this now that Ionic v4 has been published. This issue can probably be closed, although arguably there are some changes that can be made to tsconfig.spec.json.

My latest updates + walkthrough for jest setup:

Sample repository: https://github.com/ajcrites/ionic-jest-testing-example

First, npm install --save-dev jest jest-preset-angular.

Create your jest configuration as you see fit. Minimally you will need:

{
  preset: 'jest-preset-angular',
  setupTestFrameworkScriptFile: '<rootDir>/src/setupJest.ts',
  transformIgnorePatterns: [
    '<rootDir>/node_modules/(?!@ionic)',
  ],
};

You will also need to create the setupTestFrameworkScriptFile. You can make this file whatever you want. I’ve named it src/setupJest.ts and put it there. It should at least contain:

import 'jest-preset-angular';

If you are using tsconfig.spec.json you will have to add "module": "commonjs" and "allowJs": true". Mine looked like this after updating:

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

Now you’re all set to test with jest.

e2e should still work, but it does depend on karma and jasmine.

---

The default test for app.component.spec.ts uses jasmine for some things, so you will have to update it if you want to use it. I’ve done this in the sample repo: https://github.com/ajcrites/ionic-jest-testing-example/blob/master/src/app/app.component.spec.ts.

Individual needs for TypeScript configuration will also vary. I got the tests to work using just:

{
  "compilerOptions": {
    "module": "commonjs",
    "allowJs": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true
  }
}

@russcarver @paulstelzer I’ve tested with beta 17. Most of the advice in this thread still applies, summarized here:

• allowJs needs to be true for TypeScript config.
• Your svgoverride.js needs to be mapped if you have tests that import Ionic modules. This is true regardless of whether your app has or uses any svgs at all.

From what I can see, the @ionic/core/loader mapping is no longer needed.

My currently working jest configuration:

module.exports = {
  preset: 'jest-preset-angular',
  // just has `import 'jest-preset-angular';` as required
  setupTestFrameworkScriptFile: '<rootDir>/src/setupJest.ts',
  moduleNameMapper: {
    '^@ionic/core/dist/ionic/svg': '<rootDir>/svgoverride.js',
  },
  transformIgnorePatterns: [
    '<rootDir>/node_modules/(?!@ngrx|@ionic)',
  ],
};

The svgoverride.js is what you provided:

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

Note that allowJs is not set in the configuration created by ionic start. You will have to add it to whatever TypeScript configuration you use for testing.

---

In summary, the only fix for jest I would suggest is to update/fix svgoverride.js to check for require.context, although I’m not sure why this is needed. It’s possibly something that can be fixed on the jest side.

I’m not sure why allowJs is not in the default config either, but adding it may have other implications. I haven’t seen this yet, though. It could possibly be enabled for tsconfig.spec.json, but I’m not sure if that would impact the jasmine tests.

I’m also not 100% sure that the core module mapper is not needed. It might be needed in some other cases.

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.

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

It works with my fix never tried without it. And I no longer work on an Ionic project atm sorry Liam

Hi @liamdebeasi,

sorry, but I cannot answer your question. I haven’t worked with Ionic for a couple of months and have no time to investigate in this issue.

Still having the issue. As everyone said previously I had to add this to my jest config (jest-setup.ts or package.json > “jest” object) :

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

and this to my tsconfig.spec.json :

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

See https://github.com/facebook/jest/issues/2663

There are potentially many ways to fix it. I updated my jest config like so and it seems to be working:

{
  transform: {
    '^.+\\.svg$': 'jest-transform-stub',
  },
  preset: 'jest-preset-angular',

  // imports 'jest-preset-angular'
  setupTestFrameworkScriptFile: '<rootDir>/src/setupJest.ts',

  // added 'ionicons'
  transformIgnorePatterns: [
    '<rootDir>/node_modules/(?!@ngrx|@ionic|ionicons)',
  ],
};

Seems like the svgoverride.js may no longer be needed, though.

@ajcrites love you man! 😛 I’m hours trying to figure out that!