Component phụ thuộc Context, Router và React Query. Test nó thế nào cho gọn, không phải wrap tay ở từng test?

Tạo một custom render bọc sẵn mọi provider rồi re-export thay cho render của RTL.

// src/test/render.tsx
function AllProviders({ children }: { children: ReactNode }) {
  const queryClient = new QueryClient({
    defaultOptions: { queries: { retry: false, gcTime: 0 } },
  })
  return (
    <MemoryRouter initialEntries={["/"]}>
      <QueryClientProvider client={queryClient}>
        <ThemeProvider>{children}</ThemeProvider>
      </QueryClientProvider>
    </MemoryRouter>
  )
}

export function renderWithProviders(ui: ReactElement, options?: RenderOptions) {
  return render(ui, { wrapper: AllProviders, ...options })
}

Ba chi tiết quyết định test có ổn định hay không:
- retry: false cho React Query. Mặc định client retry 3 lần với backoff, nên test case lỗi sẽ chờ rất lâu rồi timeout.
- QueryClient mới cho mỗi test. Dùng chung một instance làm cache rò rỉ giữa các test, test chạy riêng thì pass mà chạy cả suite thì fail.
- MemoryRouter + initialEntries để set URL đầu vào; muốn assert điều hướng thì render một route đích rồi kiểm tra nội dung của nó.

Khi cần cấu hình khác (user đã đăng nhập, locale en), cho renderWithProviders nhận thêm option thay vì tạo bản sao wrapper mới cho từng file.