https://github.com/shannonlal/ionic5-jest-sample

The following is an Ionic 5 Sample project which uses Jest
https://github.com/shannonlal/ionic5-jest-sample

Last synced: 17 days ago
JSON representation

The following is an Ionic 5 Sample project which uses Jest

• Host: GitHub
• URL: https://github.com/shannonlal/ionic5-jest-sample
• Owner: shannonlal
• Created: 2020-09-26T23:34:43.000Z (over 4 years ago)
• Default Branch: main
• Last Pushed: 2020-09-27T17:27:33.000Z (about 4 years ago)
• Last Synced: 2024-10-23T08:50:32.308Z (2 months ago)
• Language: TypeScript
• Size: 191 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Ionic 5 Jest Sample Project

The following is a simple project that illustrates how to configure Jest support for ionic 5.  

Note:

This project was created using ionic create app functionality and follows the same commands for starting and testing the project

# Install JEST

```

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

```

# Create setup-jest.ts in src/

Note: I chanaged the sample to include zone configration as well

```

import 'jest-preset-angular';

import '../jest-global-mocks';

```

# Add jest-global-mocks.ts in src/

```

Object.defineProperty(window, 'CSS', {value: null});

Object.defineProperty(document, 'doctype', {

  value: ''

});

Object.defineProperty(window, 'getComputedStyle', {

  value: () => {

    return {

      display: 'none',

      appearance: ['-webkit-appearance']

    };

  }

});

/**

 * ISSUE: https://github.com/angular/material2/issues/7101

 * Workaround for JSDOM missing transform property

 */

Object.defineProperty(document.body.style, 'transform', {

  value: () => {

    return {

      enumerable: true,

      configurable: true,

    };

  },

});

```

# Create a tsconfig.spec.json in root

{

    "extends": "./tsconfig.json",

    "compilerOptions": {

      "outDir": "./out-tsc/spec",

      "types": [

        "jest",

        "node"

      ],

    },

    "files": [

      "src/polyfills.ts",

      "src/setup-jest.ts" -- Add

      "src/test.ts" -- Remove

    ],

    "include": [

      "src/**/*.spec.ts",

      "src/**/*.d.ts"

    ]

  }

  

# Rename test.ts to karmaTest.ts

This will ensure that there are no conflicts with karma and jest

# Create jest.config.ts in root

Note: I am following the provided example with a small tweak to setup files 

```

module.exports = {

    setupFilesAfterEnv:['/src/setup-jest.ts'],

    globals: {

      'ts-jest': {

        tsConfig: '/tsconfig.spec.json',

        stringifyContentPathRegex: '\\.html$',

        astTransformers: {

          before: [

            'jest-preset-angular/build/InlineFilesTransformer',

            'jest-preset-angular/build/StripStylesTransformer',

          ],

        },

      },

    },

    transform: {

      '^.+\\.(ts|js|html)$': 'ts-jest',

    },

    moduleFileExtensions: ['ts', 'html', 'js', 'json'],

    moduleNameMapper: {

      '^src/(.*)$': '/src/$1',

      '^app/(.*)$': '/src/app/$1',

      '^assets/(.*)$': '/src/assets/$1',

      '^pages/(.*)$': '/src/pages/$1',

      '^theme/(.*)$': '/src/themse/$1',

    },

    transformIgnorePatterns: ['node_modules/(?!@ngrx|@ionic)'],

    snapshotSerializers: [

      'jest-preset-angular/build/AngularSnapshotSerializer.js',

      'jest-preset-angular/build/HTMLCommentSerializer.js',

    ],

  };

```

# Update package.json

```

"test:unit": "jest --config=jest.config.js",

```