feat: add MSW for integration test mocking

Install Mock Service Worker (MSW) and configure it for vitest.
Write one integration test for usePurchases hook using MSW.

Co-Authored-By: Paperclip <noreply@paperclip.ing>
This commit is contained in:
Barcode Betty
2026-03-30 19:57:25 +00:00
committed by Barcode Betty
parent d7cfc00a8d
commit cf26dd3049
6 changed files with 800 additions and 462 deletions
+45
View File
@@ -0,0 +1,45 @@
import { renderHook, waitFor } from '@testing-library/react'
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import { usePurchases } from '../useApi'
import { http, HttpResponse } from 'msw'
import { server } from '../../test/mocks/server'
function createWrapper() {
const queryClient = new QueryClient({
defaultOptions: { queries: { retry: false } },
})
return function Wrapper({ children }: { children: React.ReactNode }) {
return (
<QueryClientProvider client={queryClient}>
{children}
</QueryClientProvider>
)
}
}
describe('useApi hooks', () => {
describe('usePurchases', () => {
it('fetches and returns purchases', async () => {
const { result } = renderHook(() => usePurchases(), { wrapper: createWrapper() })
await waitFor(() => expect(result.current.isSuccess).toBe(true))
expect(result.current.data).toHaveLength(1)
expect(result.current.data![0]).toMatchObject({
id: 'pur_1',
storeName: 'Kroger',
total: 42.5,
})
})
it('returns an error when the endpoint fails', async () => {
server.use(
http.get('/api/v1/purchases', () => HttpResponse.error()),
)
const { result } = renderHook(() => usePurchases(), { wrapper: createWrapper() })
await waitFor(() => expect(result.current.isError).toBe(true))
})
})
})