Test Setup
Guide to setup testing tools in your project
If you are planning to include tests from this platform, follow below steps. Tests are written using [Jest](https://jestjs.io/) for the blocks.
## 1. Install dependencies
### 1.1 Jest
```bash
npm i -D jest@29 jest-canvas-mock@2 jest-environment-jsdom@29 jest-environment-node@29 jest-preset-angular@14 @types/jest@29 ts-jest@29 ts-node
```
### 1.2 Angular animations
`@angular/animations` is needed to setup `NoopAnimationsModule` in unit tests.
```bash
npm i @angular/animations
```
## 2. Create test setup file
**`src/test-setup.ts`**
```ts
// src/test-setup.ts
///
import { setupZoneTestEnv } from 'jest-preset-angular/setup-env/zone';
import 'jest-canvas-mock';
global.ResizeObserver = jest.fn().mockImplementation(() => ({
observe: jest.fn(),
unobserve: jest.fn(),
disconnect: jest.fn(),
}));
setupZoneTestEnv();
```
## 3. Create jest config file
**`jest.config.ts`**
```ts
// jest.config.ts
export default {
displayName: 'blocks',
setupFilesAfterEnv: ['/src/test-setup.ts'],
transform: {
'^.+\\.(ts|mjs|js|html)$': [
'jest-preset-angular',
{
tsconfig: '/tsconfig.spec.json',
stringifyContentPathRegex: '\\.(html|svg)$',
isolatedModules: true,
},
],
},
transformIgnorePatterns: [
'node_modules/(?!(.*\\.mjs$|lodash-es|ng2-charts|@angular/.*))',
],
snapshotSerializers: [
'jest-preset-angular/build/serializers/no-ng-attributes',
'jest-preset-angular/build/serializers/ng-snapshot',
'jest-preset-angular/build/serializers/html-comment',
],
testEnvironmentOptions: {
errorOnUnknownElements: true,
errorOnUnknownProperties: true,
},
moduleNameMapper: {
'ng2-charts': 'node_modules/ng2-charts/fesm2022/ng2-charts.mjs',
},
testEnvironment: 'jsdom',
};
```
## 4. Create or modify tsconfig.spec file
**`tsconfig.spec.json`**
```json
// tsconfig.spec.json
{
"extends": "./tsconfig.json",
"compilerOptions": {
"outDir": "./dist/out-tsc",
"module": "commonjs",
"moduleResolution": "node10",
"types": ["jest", "node"]
},
"include": [
"jest.config.ts",
"src/**/*.test.ts",
"src/**/*.spec.ts",
"src/**/*.d.ts"
]
}
```
## 5. Add test script to package.json
```json
"scripts": {
"test": "jest"
}
```