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
  }
}

Сводка

Короче говоря, мы научились удалять карму и жасмин и устанавливать шутку.

Надеюсь, это немного поможет вам с настройкой шутки. Если вам понравился этот пост, поделитесь им.