{"id":22031977,"url":"https://github.com/datencia/ionic2-jest-example","last_synced_at":"2025-05-07T12:45:36.506Z","repository":{"id":74663811,"uuid":"92538841","full_name":"datencia/ionic2-jest-example","owner":"datencia","description":"Example of how to test an Ionic2 app with Jest","archived":false,"fork":false,"pushed_at":"2018-12-18T19:42:58.000Z","size":1977,"stargazers_count":41,"open_issues_count":0,"forks_count":5,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-03-31T10:11:25.966Z","etag":null,"topics":["angular","ionic","jest","unit-test"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/datencia.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-05-26T18:39:41.000Z","updated_at":"2023-06-22T12:05:14.000Z","dependencies_parsed_at":null,"dependency_job_id":"88fad48a-a454-4bfa-aa69-c84bd33cd895","html_url":"https://github.com/datencia/ionic2-jest-example","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/datencia%2Fionic2-jest-example","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/datencia%2Fionic2-jest-example/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/datencia%2Fionic2-jest-example/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/datencia%2Fionic2-jest-example/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/datencia","download_url":"https://codeload.github.com/datencia/ionic2-jest-example/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252881476,"owners_count":21819147,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","ionic","jest","unit-test"],"created_at":"2024-11-30T08:24:44.966Z","updated_at":"2025-05-07T12:45:36.490Z","avatar_url":"https://github.com/datencia.png","language":"TypeScript","readme":"# Testing Ionic2 with Jest\n\n[![tested with jest](https://img.shields.io/badge/tested_with-jest-99424f.svg)](https://github.com/facebook/jest)\n[![Build Status](https://travis-ci.org/datencia/ionic2-jest-example.svg?branch=master)](https://travis-ci.org/datencia/ionic2-jest-example)\n[![codecov](https://codecov.io/gh/datencia/ionic2-jest-example/branch/master/graph/badge.svg)](https://codecov.io/gh/datencia/ionic2-jest-example)\n\n![ionic love test](readme_resources/ionic_love_jest.png \"ionic love jest\")\n\nThis is an example of how to test an [Ionic 2](https://ionicframework.com/) app using [Jest](https://facebook.github.io/jest/).\n\n![yarn test](readme_resources/yarn_test.gif \"yarn test\")\n\n[Ionic 2](https://ionicframework.com/) is a great framework for building amazing mobile apps with\n[Angular](https://angular.io/), but as you may know, it comes without support for unit tests.\nYes, that's even if it seems incredible in the 21st century :-(\n\nOf course, there are different approaches to have unit tests working with an Ionic 2 Project, but most\nof then require too much configuration and knowledge about the related tooling (jasmine, karma, ...).\n\n[Jest](https://facebook.github.io/jest/) is a complete and easy to set-up JavaScript testing solution\ncreated by Facebook. Some of its benefits are:\n\n- Fast and sandboxed\n- Built-in code coverage reports\n- Zero configuration\n\nThis project tries to illustrate how to add support for unit tests to an Ionic 2 project with a minimal\nconfiguration. It's based on the awesome article [Testing Angular faster with Jest](https://www.xfive.co/blog/testing-angular-faster-jest/)\nby [Michal Pierzchala](https://www.xfive.co/blog/author/michal/).\n\n## Summary\n\n- Prerequisites\n- Steps to run the example\n- Steps to add Jest to your own Ionic 2 project\n\n### Prerequisites\n\nYou’ll need to install the latest version of the Ionic CLI and Cordova. Before you do that,\nyou’ll need a recent version of Node.js. [Download the installer](https://nodejs.org/en/) for\nNode.js 6 or greater and then proceed to install the Ionic CLI and Cordova for native app development:\n\n\u003e Verify that you are running at least node v6.x.x and npm 3.x.x by running `node -v` and `npm -v`\nin a terminal / console window. Older versions may produce errors.\n\n### Steps to run then example\n\n- Install the latest version of the Ionic CLI and Cordova.\n```bash\n$ npm install -g cordova ionic\n```\n\n \u003e You may need to add “sudo” in front of these commands to install the utilities globally\n\n \u003e If you run `ionic -v` it should return 3.0.0 (or greater)\n\n- Clone this repo into a new project folder.\n ```bash\n $ git clone https://github.com/datencia/ionic2-jest-example.git\n $ cd ionic2-jest-example\n ```\n\n- Run `npm test` (or `yarn test` if you have [yarn](https://yarnpkg.com/) installed) to run the tests.\n\n- You can also run the command `ionic serve` to get a quick preview of the app in the browser.\n\n### Steps to add Jest to your own Ionic 2 project\n\n- Install Jest dependencies:\n```bash\n$ npm install jest jest-preset-angular @types/jest --save-dev\n```\n\n- Add this to your npm scripts:\n```json\n\"test\": \"jest\",\n\"test:watch\": \"jest --watch\",\n\"test:ci\": \"jest --runInBand\",\n```\n\n Learn more about [Jest CLI Options](https://facebook.github.io/jest/docs/en/cli.html)\n\n- Include this in your `package.json`:\n```json\n{\n  \"jest\": {\n    \"preset\": \"jest-preset-angular\",\n    \"roots\": [\n      \"src\"\n    ],\n    \"setupTestFrameworkScriptFile\": \"\u003crootDir\u003e/src/setupJest.ts\",\n    \"transformIgnorePatterns\": [\n      \"node_modules/(?!@ngrx|@ionic-native|@ionic)\"\n    ]\n  }\n}\n```\n\n- In the `src` folder create a `setupJest.ts` file with following contents:\n```javascript\nimport 'jest-preset-angular';\nimport './jestGlobalMocks'; // browser mocks globally available for every test\n```\n\n- Then create the `jestGlobalMocks.ts` file with following contents\n```javascript\nconst mock = () =\u003e {\n  let storage = {};\n  return {\n    getItem: key =\u003e key in storage ? storage[key] : null,\n    setItem: (key, value) =\u003e storage[key] = value || '',\n    removeItem: key =\u003e delete storage[key],\n    clear: () =\u003e storage = {},\n  };\n};\n\nObject.defineProperty(window, 'localStorage', {value: mock()});\nObject.defineProperty(window, 'sessionStorage', {value: mock()});\nObject.defineProperty(window, 'getComputedStyle', {\n  value: () =\u003e ['-webkit-appearance']\n});\n```\n\n- In the `src` folder create a `tsconfig.spec.json` file with following contents:\n```json\n{\n  \"extends\": \"../tsconfig.json\",\n  \"compilerOptions\": {\n    \"outDir\": \"../out-tsc/spec\",\n    \"module\": \"commonjs\",\n    \"target\": \"es5\",\n    \"allowJs\": true\n  },\n  \"include\": [\n    \"**/*.spec.ts\"\n  ],\n  \"exclude\": [\n    \"node_modules\"\n  ]\n}\n```\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdatencia%2Fionic2-jest-example","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdatencia%2Fionic2-jest-example","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdatencia%2Fionic2-jest-example/lists"}