integration-test

Integration tests with Vitest validate how multiple components and modules work together. Use Testing Library to render components, MSW to mock network requests, factories to generate consistent test data, and a custom render wrapper that includes providers for realistic end-to-end scenarios like auth flows and multi-step forms.

MSW (Mock Service Worker) intercepts network requests at the handler level, letting you define mock responses without changing application code. This approach works across integration tests involving React components, database operations, and full user workflows without modifying your actual API calls.

Use async testing patterns with waitFor and findBy to handle asynchronous component state updates and API responses. Combine these with a custom render wrapper that provides context providers, enabling you to test complete workflows like authentication, form submission, and multi-step processes realistically.

Factories generate consistent, reusable test data across multiple integration tests, reducing duplication and maintenance burden. They're essential for populating realistic scenarios involving database operations, cross-module interactions, and complex component states across full user flows.

Yes. A custom render wrapper that includes your application's providers enables integration tests to validate React components within their actual context setup. This supports testing context-dependent workflows, authentication state, and multi-component interactions as they run in production.