skills.rest
thachrocky12345
thachrocky12345COMMUNITY
Explore all skills by this author →
GitHub

frontend-test-scaffold

Bootstraps Jest, Testing Library, and MSW testing infrastructure for a Next.js frontend.

Updated May 11, 2026
Search Tags:#jest#next.js#frontend testing#testing-library#ci#msw#test scaffold
One-click install
npx skills add https://github.com/thachrocky12345/local-agent-train-workstation --skill frontend-test-scaffold-thachrocky12345
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-test-scaffold
Source: https://github.com/thachrocky12345/local-agent-train-workstation/tree/main/.claude/skills/frontend-test-scaffold
Command: npx skills add https://github.com/thachrocky12345/local-agent-train-workstation --skill frontend-test-scaffold-thachrocky12345

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? The RG-Frontend project has no real test infrastructure: yarn test-all only runs format, lint, typecheck, and build, with no Jest, no Testing Library, no MSW, and no coverage reporting. This Skill scaffolds the entire testing stack from scratch. ## Core Features & Use Cases - Dependency & Config Setup: Installs Jest, ts-jest, Testing Library, and MSW, then generates jest.config.ts and jest.setup.ts with module aliases matching tsconfig paths. - MSW Mock Server: Creates mock handlers for auth, calendar, and Graphene-Django GraphQL endpoints so tests run without a live backend. - Test Templates: Provides component, Redux slice, and PHI exposure test templates that verify clinical data never reaches the DOM or browser storage. - CI Integration: Adds a GitHub Actions job running coverage and SonarCloud scans. - Use Case: When asked to "setup frontend tests" or "add jest to frontend", run the full workflow to go from zero tests to a working suite with coverage gates. ## Quick Start Ask the assistant to set up frontend testing infrastructure for RG-Frontend with Jest, Testing Library, and MSW, optionally including PHI exposure tests.

Frequently Asked Questions about frontend-test-scaffold

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I set up Jest with Next.js pages router?▼

Use next/jest's createJestConfig with testEnvironment jsdom and a jest.setup.ts file. Mock next/router (not next/navigation, which is for the app router) and mirror your tsconfig paths in moduleNameMapper so imports resolve in tests.

How to mock API calls in React tests with MSW?▼

Create handlers with msw's http.get/http.post and graphql.mutation interceptors, then start a setupServer instance in jest.setup.ts using beforeAll/afterEach/afterAll hooks. MSW v2 uses http and HttpResponse instead of the older rest API.

Does Jest moduleNameMapper need to match tsconfig paths?▼

Yes. Every alias defined in tsconfig.json paths must have a corresponding moduleNameMapper entry in jest.config.ts, or imports like @/components will fail to resolve during test runs.

How do I test Redux-connected React components?▼

Wrap the component in a Redux Provider with a store created via configureStore and optional preloadedState. Components using Apollo useQuery also need a MockedProvider wrapper with mock query results.

Why do MSW handlers not intercept requests in Jest?▼

Common causes are using MSW v1 rest syntax with v2 installed, missing transformIgnorePatterns for msw packages, or the server not being started in setupFilesAfterEach. Verify the handler URL exactly matches the request URL including the base path.

Related Skills

Explore More Software Engineering Skills→
ruan-catruan-cat

api-migration

Migrate frontend API contracts from Vue2 to Alova and TypeScript.

Community
Advanced
camoneartcamoneart
5

javascript-testing-patterns

Configure Jest or Vitest testing patterns for JavaScript and TypeScript applications.

Community
Advanced
patricio0312revpatricio0312rev
5

mocking-assistant

Automate API and service mocking in tests with MSW and fixtures.

Community
Advanced
alexanderopalexanderop
15

vue-integration-testing

Run Vue 3 UI tests with Vitest Browser mode using Page Objects and createTestApp helpers.

Community
Advanced