How do you test components that depend on React Context without running the entire application?

Short answer

Wrap the target component in the required Context.Provider inside render and supply test-specific mock data.

Explanation

To avoid running the entire app tree, pass a custom wrapper to render or create a shared renderWithProviders helper that wraps each component in required Providers (such as ThemeProvider, QueryClientProvider, and Router) while letting tests choose initial state.

Code example

function renderWithTheme(ui: React.ReactElement, theme = 'dark') {
  return render(
    <ThemeContext.Provider value={theme}>
      {ui}
    </ThemeContext.Provider>
  );
}

test('Shows dark mode', () => {
  renderWithTheme(<UserProfile />, 'dark');
  expect(screen.getByTestId('profile-container')).toHaveClass('theme-dark');
});

Common mistakes

• Forgetting to wrap a component in a required Context it consumes, causing TypeError: Cannot read properties of undefined.

Follow-up questions

• How do you test a Custom Hook separately with RTL's renderHook?

Sources

• Testing Library docs — Example: React Context