Testing Ionic2 with Jest

This is an example of how to test an Ionic 2 app using Jest.

Ionic 2 is a great framework for building amazing mobile apps with Angular, but as you may know, it comes without support for unit tests. Yes, that's even if it seems incredible in the 21st century :-(

Of course, there are different approaches to have unit tests working with an Ionic 2 Project, but most of then require too much configuration and knowledge about the related tooling (jasmine, karma, ...).

Jest is a complete and easy to set-up JavaScript testing solution created by Facebook. Some of its benefits are:

• Fast and sandboxed
• Built-in code coverage reports
• Zero configuration

This project tries to illustrate how to add support for unit tests to an Ionic 2 project with a minimal configuration. It's based on the awesome article Testing Angular faster with Jest by Michal Pierzchala.

Summary

• Prerequisites
• Steps to run the example
• Steps to add Jest to your own Ionic 2 project

Prerequisites

You’ll need to install the latest version of the Ionic CLI and Cordova. Before you do that, you’ll need a recent version of Node.js. Download the installer for Node.js 6 or greater and then proceed to install the Ionic CLI and Cordova for native app development:

Verify that you are running at least node v6.x.x and npm 3.x.x by running node -v and npm -v in a terminal / console window. Older versions may produce errors.

Steps to run then example

• Install the latest version of the Ionic CLI and Cordova.

$ npm install -g cordova ionic

You may need to add “sudo” in front of these commands to install the utilities globally

If you run ionic -v it should return 3.0.0 (or greater)

• Clone this repo into a new project folder.

$ git clone https://github.com/datencia/ionic2-jest-example.git
$ cd ionic2-jest-example

• Run npm test (or yarn test if you have yarn installed) to run the tests.

• You can also run the command ionic serve to get a quick preview of the app in the browser.

Steps to add Jest to your own Ionic 2 project

• Install Jest dependencies:

$ npm install jest jest-preset-angular @types/jest --save-dev

• Add this to your npm scripts:

"test": "jest",
"test:watch": "jest --watch",
"test:ci": "jest --runInBand",

Learn more about Jest CLI Options

• Include this in your package.json:

{
  "jest": {
    "preset": "jest-preset-angular",
    "roots": [
      "src"
    ],
    "setupTestFrameworkScriptFile": "<rootDir>/src/setupJest.ts",
    "transformIgnorePatterns": [
      "node_modules/(?!@ngrx|@ionic-native|@ionic)"
    ]
  }
}

• In the src folder create a setupJest.ts file with following contents:

import 'jest-preset-angular';
import './jestGlobalMocks'; // browser mocks globally available for every test

• Then create the jestGlobalMocks.ts file with following contents

const mock = () => {
  let storage = {};
  return {
    getItem: key => key in storage ? storage[key] : null,
    setItem: (key, value) => storage[key] = value || '',
    removeItem: key => delete storage[key],
    clear: () => storage = {},
  };
};

Object.defineProperty(window, 'localStorage', {value: mock()});
Object.defineProperty(window, 'sessionStorage', {value: mock()});
Object.defineProperty(window, 'getComputedStyle', {
  value: () => ['-webkit-appearance']
});

• In the src folder create a tsconfig.spec.json file with following contents:

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/spec",
    "module": "commonjs",
    "target": "es5",
    "allowJs": true
  },
  "include": [
    "**/*.spec.ts"
  ],
  "exclude": [
    "node_modules"
  ]
}