Jest を最新の angular バージョンと統合する
jest が単体テストで勢いを増しているため、angular コンポーネントを最新の angular バージョン (12+) と統合する方法を見てみましょう.
を使用してジャスミンとカルマをアンインストールします を使用して jest をインストールします ルートにファイル
ルートにファイル
で
これで、jest は最新の angular と完全に統合されました 👏 💥
お読みいただきありがとうございます
サンプルリポジトリ here を見つけることができます
npm uninstall -D @types/jasmine jasmine jasmine-core jasmine-spec-reporter karma karma-chrome-launcher karma-coverage karma-jasmine karma-jasmine-html-reporter ts-node npm i -D @types/jest jest jest-preset-angular @angular-builders/jest setupJest.ts を作成し、コンテンツの下に追加しますimport { getTestBed } from '@angular/core/testing';
import {
BrowserDynamicTestingModule,
platformBrowserDynamicTesting,
} from '@angular/platform-browser-dynamic/testing';
import 'jest-preset-angular';
import 'zone.js';
import 'zone.js/testing';
getTestBed().initTestEnvironment(
BrowserDynamicTestingModule,
platformBrowserDynamicTesting(),
{
teardown: { destroyAfterEach: true },
}
);
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
};
}
});
ng upgrade を使用して低角度バージョンから移行する場合、上記のコードを除いて、src/test.ts ファイルで他のコードを使用している場合は、その新しいコンテンツを setupJest.ts に追加し、src/test.ts を削除します jest.config.js を作成し、コンテンツの下に追加しますmodule.exports = {
preset: 'jest-preset-angular',
roots: ['<rootDir>/src'],
testMatch: ['**/+(*.)+(spec).+(ts)'],
collectCoverage: true,
coverageReporters: ['html', 'lcov', 'json', 'text'],
coverageDirectory: '<rootDir>/coverage',
moduleFileExtensions: ['ts', 'html', 'js', 'json'],
};
test の angular.json 部分を以下の内容に置き換えます...
"test": {
"builder": "@angular-builders/jest:run",
"options": {
"main": ["setupJest.ts"],
"tsConfig": "src/tsconfig.spec.json",
"no-cache": true
}
}
...
"esModuleInterop": true の compilerOptions に tsconfig.json を追加tsconfig.spec.json を開き、jasmine フィールド jest を types に置き換えます.これで、jest は最新の angular と完全に統合されました 👏 💥
お読みいただきありがとうございます
サンプルリポジトリ here を見つけることができます
Reference
この問題について(Jest を最新の angular バージョンと統合する), 我々は、より多くの情報をここで見つけました https://dev.to/kiranmantha/integrating-jest-with-latest-angular-version-4h4mテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol