angular单测框架从Karma切换到Jest
卫财
git init
git remote add origin git@github.com:yourname:yourproject.git
git push -u origin master
…or create a new repository on the command line
echo "# strict-ng-hero" >> README.md
git init
git add README.md
git commit -m "first commit"
git branch -M main
git remote add origin git@github.com:jay-xzj/strict-ng-hero.git
git push -u origin main
…or push an existing repository from the command line
git remote add origin git@github.com:jay-xzj/strict-ng-hero.git
git branch -M main
git push -u origin main
jest配置
删除karma相关东西
- remove karma dependencies
// Remove dependencies
npm uninstall karma karma-chrome-launcher karma-coverage karma-jasmine karma-jasmine-html-reporter
//or if you are using yarn as package manager:
yarn remove karma karma-chrome-launcher karma-coverage-istanbul-reporter karma-jasmine karma-jasmine-
- 删除karma.config.js
- 删除package-lock.json (不然会报错：Jest configuration setupFilesAfterEnv option was not found) 如果报错删除node_modules npm i 然后 npm cache clean --force
- 删除
angular.json下面的"test"配置，因为我们不再使用karma了
在karma.config.js同级替换成jest.config.js
const { pathsToModuleNameMapper } = require('ts-jest');
const { compilerOptions } = require('./tsconfig');
module.exports = {
preset: 'jest-preset-angular',
roots: ['<rootDir>/src/'],
testMatch: ['**/+(*.)+(spec).+(ts)'],
setupFilesAfterEnv: ['<rootDir>/src/test.ts'],
collectCoverage: true,
coverageReporters: ['html'],
coverageDirectory: 'coverage/[project-name]',
moduleNameMapper: pathsToModuleNameMapper(compilerOptions.paths || {}, {
prefix: '<rootDir>/'
})
};
修改 test.ts 改成jest的setup配置
import 'jest-preset-angular/setup-jest';
Object.defineProperty(window, 'CSS', {value: null});
Object.defineProperty(window, 'getComputedStyle', {
value: () => {
return {
display: 'none',
appearance: ['-webkit-appearance']
};
}
});
Object.defineProperty(document, 'doctype', {
value: '<!DOCTYPE html>'
});
Object.defineProperty(document.body.style, 'transform', {
value: () => {
return {
enumerable: true,
configurable: true
};
}
});
tsconfig.json 和 tsconfig.spec.json
- 首先，删除第一行的注释，以为jest不允许json文件里面出现注释
- 配置tsconfig.spec.json
{
"extends": "./tsconfig.json",
"compilerOptions": {
"outDir": "./out-tsc/spec",
"types": [
//"jasmine"
"jest"//1
],
"esModuleInterop": true, // 2
"emitDecoratorMetadata": true //3
},
"files": [
"src/test.ts",
"src/polyfills.ts"
],
"include": [
"src/**/*.spec.ts",
"src/**/*.d.ts"
]
}
- 1.Register Jest’s type definitions files with the TypeScript compiler.
- 2.Enable the esModuleInterop option of the TypeScript compiler otherwise, Jest will output a lot of warnings in the console.
- 3.Enable the emitDecoratorMetadata option of the TypeScript compiler otherwise, Angular’s Dependency Injection won’t work with Jest.
运行测试
可以安装jest runner插件对单个测试进行运行
也可以直接npx jest 运行所有的
参考
主要参考：
类似资料：