Jasmine по умолчанию поставляется в angular; это отличная среда для тестирования, но разработчик переходит от жасмина к шутке.
Этот пост призван помочь вам настроить шутку.
Удалить Жасмин и карму
Удалите ниже из package.json и сохраните его.
"@types/jasmine": "~4.3.0", "jasmine-core": "~4.5.0", "karma": "~6.4.0", "karma-chrome-launcher": "~3.1.0", "karma-coverage": "~2.2.0", "karma-jasmine": "~5.1.0", "karma-jasmine-html-reporter": "~2.0.0",
Запустите установку npm, чтобы удалить неиспользуемый пакет.
Установите и настройте Jest
Установите ниже пакет.
npm install --save-dev @angular-builders/jest npm install --save-dev jest jest-preset-angular @types/jest npm install --save-dev ts-jest
Отредактируйте тестовую область в angular.json.
"test": { "builder": "@angular-builders/jest:run" },
Создайте setup-jest.ts в папке src и импортируйте файл jest-preset-angular.
import 'jest-preset-angular/setup-jest';
Создайте файл test.ts в папке src.
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 }; } });
Создайте 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, testPathIgnorePatterns: [ "<rootDir>/node_modules/", "<rootDir>/dist", "/e2e-" ], globals: { "ts-jest": { "tsConfig": "<rootDir>/tsconfig.spec.json" } }, moduleNameMapper: pathsToModuleNameMapper(compilerOptions.paths || {}, { prefix: '<rootDir>/' }) };
Отредактируйте tsconfig.spec.json, как в моем примере.
{ "extends": "./tsconfig.json", "compilerOptions": { "outDir": "../out-tsc/spec", "baseUrl": "./", "module": "commonjs", "types": ["jest", "node"] }, "files": ["src/setup-jest.ts", "src/polyfills.ts"], "include": ["src/**/*.spec.ts", "src/**/*.d.ts"] }
Отредактируйте tsconfig.app.json, как в моем примере.
{ "compileOnSave": false, "compilerOptions": { "importHelpers": true, "outDir": "./dist/out-tsc", "sourceMap": true, "declaration": false, "moduleResolution": "node", "emitDecoratorMetadata": true, "experimentalDecorators": true, "target": "es2020", "typeRoots": [ "node_modules/@types" ], "lib": [ "es2017", "dom" ], "resolveJsonModule": true, "baseUrl": "src/", "esModuleInterop": true } }
Отредактируйте tsconfig.json, как в моем примере.
{ "compileOnSave": false, "compilerOptions": { "importHelpers": true, "outDir": "./dist/out-tsc", "sourceMap": true, "declaration": false, "moduleResolution": "node", "emitDecoratorMetadata": true, "experimentalDecorators": true, "target": "es2020", "typeRoots": [ "node_modules/@types" ], "lib": [ "es2017", "dom" ], "resolveJsonModule": true, "baseUrl": "src/", "esModuleInterop": true } }
Сводка
Короче говоря, мы научились удалять карму и жасмин и устанавливать шутку.
Надеюсь, это немного поможет вам с настройкой шутки. Если вам понравился этот пост, поделитесь им.