This gets Claude set up to help you test Angular apps with Jest instead of the default Jasmine/Karma combo. It covers the basic installation flow with jest-preset-angular, configuration setup, and the standard TestBed pattern for component tests. Honestly, the migration from Karma to Jest is pretty common now since Jest is faster and has better tooling, so having this context loaded means Claude won't try to give you Karma examples when you're clearly working in a Jest environment. The code snippets are straightforward but they nail the 80% use case of getting a component test running.

skills.sh installs
190
GitHub stars
7
last updated
Aug 21, 2026

Install

$ npx -y skills add oguzhan18/angular-ecosystem-skills --skill angular-jest --agent claude-code

Installs into .claude/skills of the current project.

Files

Angular + Jest

Version: Jest 29.x (2025) Tags: Jest, Testing, Unit Tests

References: Jest • jest-preset-angular

Best Practices

  • Install Jest
npm install --save-dev jest @types/jest jest-preset-angular
  • Configure Jest
// jest.config.js
module.exports = {
  preset: 'jest-preset-angular',
  setupFilesAfterEnv: ['<rootDir>/setup-jest.ts'],
  testPathIgnorePatterns: ['<rootDir>/node_modules/'],
};
  • Write test
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();
  });
});

Sponsors

Details

Repository
github.com/oguzhan18/angular-ecosystem-skills
Categories
Frontend Development, Testing & QA
First seen
Jun 3, 2026

More from oguzhan18/angular-ecosystem-skills

All 45
1oguzhan18 avatarangular-standaloneoguzhan18/angular-ecosystem-skillsALWAYS use when working with Angular Standalone Components, imports array, bootstrapping, or migrating from NgModules in Angular applications.189skills.sh installs
2nexu-io avatarhtml-ppt-weekly-reportnexu-io/open-designTeam weekly / status-update deck — corporate clarity, 8-cell KPI grid, shipped list, 8-week bar chart, next-week table. Use for 周报, business reviews, team statu185skills.sh installs
3nexu-io avatarhtml-ppt-graphify-dark-graphnexu-io/open-design暗底知识图谱 deck —184skills.sh installs
4nexu-io avatarhtml-ppt-xhs-pastel-cardnexu-io/open-design柔和马卡龙慢生活 deck — 奶油184skills.sh installs
5nexu-io avatarhtml-ppt-dir-key-nav-minimalnexu-io/open-design8 页极简方向键 keynote — 每页一个独立单色背景(靛 / 奶 / 绛 / 翠 / 灰 / 紫 / 白 / 炭),各自配色,160px display 标题 + 4px 短粗 accent 线分隔、箭头 → 前缀的 Mono 列表、左下 ← → kbd 提示 + 右下页码、巨大呼吸留白。适合"有话要说但没什么可182skills.sh installs
6nexu-io avatarhtml-ppt-xhs-white-editorialnexu-io/open-design白底杂志风 deck — 纯白背景 + 顶部 10 色彩虹 bar、80-110px display 标题、紫→蓝→绿→橙→粉渐变文字、马卡龙软卡片组(粉/紫/蓝/绿/橙)、黑底白字 .focus pill、引用大块。同时适合发小红书图文 + 横版 PPT 双用。182skills.sh installs