angular-jest について
Jest と jest-preset-angular を使う Angular プロジェクト向けテストスキルです。Jest の設定とコンポーネントのユニットテスト方法を扱います。
主な機能
- 01Jest テスト依存関係の導入
- 02jest-preset-angular の設定
- 03コンポーネントのユニットテスト作成
活用シーン
- 01Angular プロジェクトでの Jest 設定
- 02TestBed を使った Angular コンポーネントのテスト
インストール
コマンドをコピーしてターミナルで実行します。
$
npx skills add https:/ / github.com/ oguzhan18/ angular-ecosystem-skills --skill angular-jestインストール後、Claude Code で/angular-jestを入力して読み込まれたか確認します。
同梱ファイル
SKILL.md と一緒にインストールされる参考資料やスクリプト。
references/discussions/_INDEX.mdreferences/docs/_INDEX.mdreferences/issues/_INDEX.mdreferences/releases/_INDEX.md詳細
Angular + Jest
バージョン: Jest 29.x(2025) タグ: Jest、テスト、単体テスト
参考資料: Jest • jest-preset-angular
ベストプラクティス
- Jest をインストールします
npm install --save-dev jest @types/jest jest-preset-angular
- Jest を設定します
// jest.config.js
module.exports = {
preset: 'jest-preset-angular',
setupFilesAfterEnv: ['<rootDir>/setup-jest.ts'],
testPathIgnorePatterns: ['<rootDir>/node_modules/'],
};
- テストを作成します
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { MyComponent } from './my.component';
describe('MyComponent', () => {
let component: MyComponent;
let fixture: ComponentFixture<MyComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
imports: [MyComponent]
}).compileComponents();
fixture = TestBed.createComponent(MyComponent);
component = fixture.componentInstance;
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
コメント
Markdown 対応