
Angular Jest
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-codeInstalls 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
Promote your product hereReach 125k+ visitors monthlyPromote your product hereReach 125k+ visitors monthly
Agent CaffeineSponsoredClose your lid, come back to finished work
SnugSponsoredThe clipboard manager for the AI eraPromote your product hereReach 125k+ visitors monthly
WaxSponsoredBlock anything with supervision, without erasing your iPhonePromote your product hereReach 125k+ visitors monthly
knobsSponsoredSee your site on any phone, any day, in any language
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- Angular Pwa190
- Angular Standalone189
- Angular Elements188
- Angular Cli187
- Angular Http185
- Angular Guards184
- Angular Interceptors184
- Angular Schematics184
- Angular Components182
- Angular Destroyref182
- Angular Forms182
- Angular Pipes180
- Angular Resolvers179
- Angular Deferrable178
- Angular Resource178
- Angular Signals178
- Angular Signals Forms178
- Angular Reactive177
- Angular Directives176
- Angular Lifecycle176
- Angular Di175
- Angular Viewchild174
- Angular Cypress172
- Angular Router172
Recommended
More Frontend Development1
angular-standaloneoguzhan18/angular-ecosystem-skillsALWAYS use when working with Angular Standalone Components, imports array, bootstrapping, or migrating from NgModules in Angular applications.189skills.sh installs
2
html-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
5
html-ppt-dir-key-nav-minimalnexu-io/open-design8 页极简方向键 keynote — 每页一个独立单色背景(靛 / 奶 / 绛 / 翠 / 灰 / 紫 / 白 / 炭),各自配色,160px display 标题 + 4px 短粗 accent 线分隔、箭头 → 前缀的 Mono 列表、左下 ← → kbd 提示 + 右下页码、巨大呼吸留白。适合"有话要说但没什么可182skills.sh installs
6
html-ppt-xhs-white-editorialnexu-io/open-design白底杂志风 deck — 纯白背景 + 顶部 10 色彩虹 bar、80-110px display 标题、紫→蓝→绿→橙→粉渐变文字、马卡龙软卡片组(粉/紫/蓝/绿/橙)、黑底白字 .focus pill、引用大块。同时适合发小红书图文 + 横版 PPT 双用。182skills.sh installs