skills.rest
reactive
reactiveOFFICIAL
Explore all skills by this author →
Website𝕏@dataclientioGitHub

data-client-react-testing

Test @data-client/react hooks and components with fixtures, interceptors, and mock resolvers.

2.0k|99|Updated Feb 15, 2019
Search Tags:#Jest#Testing#Hooks#Mocking#Fixtures#data-client#reAct
One-click install
npx skills add https://github.com/reactive/data-client --skill data-client-react-testing
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: data-client-react-testing
Source: https://github.com/reactive/data-client/tree/main/.agents/skills/data-client-react-testing
Command: npx skills add https://github.com/reactive/data-client --skill data-client-react-testing

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @data-client/test, @data-client/react, @testing-library/react, nock, jest, and includes references (resource) components.

What problem does it solve?

Writing tests for React hooks and components that depend on @data-client/react requires mocking network requests, store state, and async resolution, which is tedious and error-prone without dedicated utilities.

Core Features & Use Cases

  • Hook Testing with renderDataHook: Render hooks like useSuspense against fixture data with automatic cleanup, controller access, and async settling.
  • Component Testing with MockResolver: Wrap components in DataProvider and MockResolver to supply fixture responses during rendering.
  • HTTP-Level Testing with nock: Validate actual endpoint definitions by intercepting real HTTP requests.
  • Use Case: When building a todo app on @data-client/react, write unit tests that verify useSuspense renders fetched todos, mutations create entities correctly, and error states surface properly, all without a live backend.

Quick Start

Write a jest test for my useSuspense hook that fetches TodoResource.get with a fixture response and asserts the rendered title.

Frequently Asked Questions about data-client-react-testing

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

FAQPage Schema
How do I test useSuspense hooks with @data-client/react?▼

Use renderDataHook from @data-client/test with initialFixtures that map an endpoint and args to a response. The hook renders against the fixture data, and you assert on result.current after async resolution.

How to test React components that use DataProvider?▼

Wrap the component in DataProvider and MockResolver from @data-client/test, passing fixtures that define endpoint responses. Render with @testing-library/react and assert on the rendered output.

Should I use fixtures or nock for testing data fetching?▼

Use fixtures or interceptors when testing hooks and components, since they mock at the store level. Use nock when testing the networking definitions themselves, such as verifying an endpoint hits the correct URL.

Do I need to manually clean up renderDataHook after each test?▼

No, cleanup is automatic. An afterEach hook is registered at module load time that drains all active cleanups, so manual renderDataHook.cleanup() calls are unnecessary.

How do I test error states in data-client hooks?▼

Provide a fixture with an error field alongside the endpoint and args. The hook will receive the rejection, and you can use waitFor to assert the expected undefined or error behavior.

Related Skills

Explore More Software Engineering Skills→
reactivereactive
2.0k

rdc-endpoint-setup

Wraps async functions in Endpoint for Data Client hooks.

Official
Advanced
B4sanB4san

ci-deploy

Automate CI/CD pipelines, deployments, and post-deployment verification.

Community
Advanced
duanbiao2000duanbiao2000
3

e2e-testing-patterns

Automate end-to-end testing patterns for Playwright and Cypress.

Community
Advanced
btabaskabtabaska
1

Generate Mock

Generate deterministic mocks for pytest, Vitest, and MSW test environments.

Community
Intermediate