With the focus on simplicity, we chose to use JEST as Testing Framework for our unit and integration tests, which aims to work with a minimum set of configurations, on most js projects.
You can follow the official documentation to set up the testing for your project.
To be easier to integrate the testing structure in your project, in the next section we showcase the testing configuration done for our otter-demo-app.
First thing is to add jest dependencies in your package.json. Add the following dev dependencies (the version of packages is subject to evolve).
Example : "@types/jest": "^27.0.2",
"jest": "^27.0.6",
"jest-junit": "^12.2.0",
"jest-preset-angular": "^9.0.5",Add jest.config.js file at the root of your project.
Example :/** @type {import('ts-jest/dist/types').JestConfigWithTsJest} */
module.exports = {
preset: 'jest-preset-angular',
rootDir: '.',
setupFilesAfterEnv: ['<rootDir>/testing/setup-jest.ts'],
transformIgnorePatterns: ['\\.js$'],
moduleNameMapper: {
'@o3r/testing/core(/?.*)': ['<rootDir>/node_modules/@o3r/testing/core/angular$1'] // otter testing core redirection to Angular implementation
},
testMatch: [ '**/?(*.)+(int-spec|spec).ts' ],
reporters: [
'default',
'github-actions'
],
globalSetup: 'jest-preset-angular/global-setup',
transform: {
// eslint-disable-next-line @typescript-eslint/naming-convention
'^.+\\.tsx?$': [
'jest-preset-angular',
{
tsconfig: '<rootDir>/tsconfig.spec.json',
stringifyContentPathRegex: '\\.html$'
}
]
}
};
As you can see there are references to a setup-jest.ts and tsconfig.spec.json files which we chose to put under a testing folder at the root.
setup-jest.ts files contains the setup done for jest to be used in Angular context
Example :import 'isomorphic-fetch';
import {
setupZoneTestEnv,
} from 'jest-preset-angular/setup-env/zone';
setupZoneTestEnv();
import '@angular/localize/init';tsconfig.json contains a simple setup for typescript transpilation with one mention related to compilerOptions paths where we redirect all imports of the helpers from @o3r/testing/core, to the Angular implementation of these helpers. It's similar with the configuration done in jest.config.js for module mappers.
Example :{
"compilerOptions": {
"target": "ES2020",
"module": "ES2020",
"declaration": false,
"downlevelIteration": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"importHelpers": true,
"strictPropertyInitialization": false,
"strictNullChecks": false,
"esModuleInterop": true,
"baseUrl": "..",
"rootDir": "..",
"types": [
"jest",
"node"
],
"paths": {
"@o3r/testing/core": ["node_modules/@o3r/testing/core/angular"],
"@o3r/testing/core*": ["node_modules/@o3r/testing/core/angular*"]
}
},
"exclude": [
"node_modules/**"
],
"include": [
"../src/**/*.spec.ts",
"../src/**/*.int-spec.ts"
]
}
As you may notice, we consider as test files all files ending in .spec.ts and .int-spec.ts .
Once done with the configuration it is the time to run your tests.
Add the following section to your package.json:
Example :{
"scripts": {
"test": "jest"
}
}To run the tests in the CI you can use --ci option. More about jest option in the official documentation