https://github.com/shannonlal/ionic-5-jest-sample
The following is an Ionic 5 example repo with Jest
https://github.com/shannonlal/ionic-5-jest-sample
Last synced: 2 months ago
JSON representation
The following is an Ionic 5 example repo with Jest
- Host: GitHub
- URL: https://github.com/shannonlal/ionic-5-jest-sample
- Owner: shannonlal
- Created: 2020-09-25T21:32:48.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2020-09-26T18:23:56.000Z (over 4 years ago)
- Last Synced: 2025-02-04T21:46:13.916Z (4 months ago)
- Language: TypeScript
- Size: 210 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';
try {
// If the user are using zone.js 0.11.1+
// all jest support logic are implemented inside zone.js
// we only need to load zone-testing.umd.js module
require('zone.js/bundles/zone-testing-bundle.umd.js');
} catch (err) {
// Fallback logic to load zone and zone-patch
// when the user still use zone.js 0.10.x
require('zone.js/dist/zone');
require('zone.js/dist/proxy');
require('zone.js/dist/sync-test');
require('zone.js/dist/async-test');
require('zone.js/dist/fake-async-test');
}
```
# 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/setup-jest.ts"
],
"include": [
"src/**/*.spec.ts",
"src/**/*.d.ts"
]
}
# 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)'],
snapshotSerializers: [
'jest-preset-angular/build/AngularSnapshotSerializer.js',
'jest-preset-angular/build/HTMLCommentSerializer.js',
],
};
```
# Upgrade Version of Typescript.
Note Current version of typescript with ionic 5 is version 2.6. This will cause conflicts. Recommend upgrading the typescript version in the package.json file
```
"typescript": "2.6.2" //OLD
"typescript": "4.0.3" NEW
```
# Update package.json
```
"test:unit": "jest --config=jest.config.js",
```