integration-testing

Validates frontend-backend API contracts through joint debugging, Pact contract tests, and integration tests.

Updated Jul 31, 2026

Search Tags:#vitest #integration testing #api testing #contract testing #httpx #msw #pact

Ready to run

npx skills add https://github.com/shengmingzhishu/LeeCommonVideoCut --skill integration-testing-shengmingzhishu

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: integration-testing
Source: https://github.com/shengmingzhishu/LeeCommonVideoCut/tree/main/.trae/skills/shared/integration-testing
Command: npx skills add https://github.com/shengmingzhishu/LeeCommonVideoCut --skill integration-testing-shengmingzhishu

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Frontend and backend teams often ship mismatched interfaces—wrong field names, misaligned error codes, or broken pagination—that only surface late in development. This Skill verifies that both sides of an API contract stay aligned before release. ## Core Features & Use Cases - Joint Debugging Tests: End-to-end verification of frontend dev server against backend staging APIs, covering paths, parameters, response fields, error codes, auth tokens, and CORS. - Contract Testing (Pact): Consumer-driven contract verification where the frontend defines expected requests/responses and the backend validates them automatically in CI. - API Integration Tests: Backend end-to-end tests via httpx against real services, plus frontend component tests using Vitest and MSW to mock API responses. - Use Case: After implementing a new evaluation-suite API, run the backend integration test to create suites, add cases, and run evaluations, then verify the frontend list page renders data correctly with MSW mocks. ## Quick Start Run integration tests to verify the frontend and backend API contracts are aligned for the eval suites endpoints.

Frequently Asked Questions about integration-testing

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

FAQPage Schema

How do I test frontend-backend API integration?▼

Run joint debugging tests connecting the frontend dev server to a backend staging API, checking paths, methods, parameter types, response fields, error codes, pagination, auth tokens, and CORS configuration against a checklist.

What is Pact contract testing for APIs?▼

Pact contract testing lets the consumer (frontend) define expected requests and responses, then the provider (backend) verifies it satisfies all consumer expectations. It runs automatically in CI to detect breaking changes when either side changes.

How to mock API responses in frontend tests with MSW?▼

Use MSW's setupServer to intercept requests like GET /api/eval/suites and return mock JSON responses. Then render components with Vitest and assert that API data appears in the DOM, verifying rendering, data flow, and state changes.

Can I run backend API integration tests without mocks?▼

Yes, start a real service or use testcontainers, then call the full API flow through httpx. Verify each endpoint's status code and confirm database state changes after operations like creating suites and running evaluations.

When should integration tests run in the development workflow?▼

Run backend integration tests after backend implementation, frontend MSW tests after frontend implementation, then joint debugging once both sides connect. Finish with Pact contract tests before release to confirm contract consistency.