Enforces vitest and Testing Library conventions for React component tests with MSW mocks and form fillers.
npx skills add https://github.com/Layer-Fi/layer-react --skill testing-layer-fi
Please help me install this Agent Skill. Skill: testing Source: https://github.com/Layer-Fi/layer-react/tree/main/src/testUtils Command: npx skills add https://github.com/Layer-Fi/layer-react --skill testing-layer-fi
getByRole-first query priority, userEvent over fireEvent, awaited interactions, and findBy* over waitFor for DOM assertions. - Standardized rendering and mocking: Requires a module-scope render helper wrapping LayerTestProvider, MSW per-test mocks via endpoint mock/mockError builders, and request-body assertions through onRequest spies. - Form fillers and fixed clocks: Provides createFormFiller kinds (text, number, checkbox, toggle, radio, comboBox) addressed by accessible label, plus setupFakeSystemTime with pre-derived fixed date constants. - Use Case: When adding a test for a new account-creation form, define one renderForm helper, declare a FillFormSpec constant, mock the POST endpoint with server.use, and assert the exact request body the app sent. ## Quick Start Write a vitest test for my React component following this repository's testing conventions, using LayerTestProvider, MSW endpoint mocks, and the form filler helpers.High-intent search queries and answers about installing and using this skill.
Render the component inside a provider wrapper, query elements with getByRole using accessible names, and interact via userEvent with every call awaited. Assert on visible output and request payloads, never on internal state or hook call counts.
Import the endpoint module and register its mock or mockError builder with server.use per test. Use the onRequest callback to spy on the request body and params instead of stubbing fetch, since unmocked requests fail the test.
Use userEvent. fireEvent dispatches a single synthetic event, while userEvent fires the real keydown/keypress/input sequence and respects disabled states and pointer-events, which is what actually catches broken handlers.
The warning means a state update landed that the test never awaited, usually from an un-awaited user.click or an unresolved async render. Await the visible consequence with findBy or waitFor instead of wrapping in act().
Pin the clock with vi.useFakeTimers and vi.setSystemTime in beforeEach, restoring real timers in afterEach. When combining a fake clock with userEvent, pass advanceTimers: vi.advanceTimersByTime to userEvent.setup or interactions will hang.
Only when no role, label, text, or alt query can address the element. Role-based queries match text split across child elements and print the accessible tree on failure, making tests more robust than test ids.
onmaxWrite and configure unit and integration tests for Vite projects with Vitest.
cromesdkEnforce Vitest coverage thresholds and remediate test gaps in NestJS backends.
oakossGenerate and maintain Storybook stories and interaction tests using CSF3 format.
heaptracetechnologyAutomate end-to-end browser tests for multi-step user journeys with Playwright or Cypress.