How to Test Context in React: Simple Guide with Examples

To test React context, wrap the component under test with the context Provider supplying the desired value. Use @testing-library/react to render the component inside this provider and assert the output or behavior based on the context value.

Syntax

Testing React context involves wrapping your component with the context Provider and passing the value you want to test. This lets you simulate different context states.

• Context.Provider: Wraps the component to provide context value.
• value: The context data you want to test with.
• render: From React Testing Library to render the wrapped component.

javascript

import { render } from '@testing-library/react';
import { MyContext } from './MyContext';

render(
  <MyContext.Provider value={testValue}>
    <ComponentUnderTest />
  </MyContext.Provider>
);

Example

This example shows how to test a component that consumes a context value and renders it.

javascript

import React, { createContext, useContext } from 'react';
import { render, screen } from '@testing-library/react';

const MyContext = createContext();

function DisplayValue() {
  const value = useContext(MyContext);
  return <div>Value: {value}</div>;
}

test('renders value from context', () => {
  render(
    <MyContext.Provider value="Hello, Test!">
      <DisplayValue />
    </MyContext.Provider>
  );
  expect(screen.getByText('Value: Hello, Test!')).toBeInTheDocument();
});

Output

PASS  renders value from context

Common Pitfalls

Common mistakes when testing context include:

• Not wrapping the component with the Provider, causing context to be undefined.
• Forgetting to pass the correct value to the provider.
• Testing components that use context without mocking or providing context, leading to errors.

Always ensure your test environment mimics the real context usage.

javascript

/* Wrong: Missing Provider causes error */
import { render } from '@testing-library/react';
import { useContext } from 'react';
import { MyContext } from './MyContext';

function Component() {
  const value = useContext(MyContext);
  return <div>{value}</div>;
}

test('fails without provider', () => {
  // This will throw because no provider wraps Component
  expect(() => render(<Component />)).toThrow();
});

/* Right: Wrap with Provider */
test('works with provider', () => {
  render(
    <MyContext.Provider value="Test">
      <Component />
    </MyContext.Provider>
  );
});

Quick Reference

Tips for testing React context:

• Always wrap tested components with the context Provider.
• Pass the exact value you want to test.
• Use React Testing Library's render for realistic DOM testing.
• Mock context values to test different scenarios.

Key Takeaways

Wrap components with the context Provider to supply test values.

Use React Testing Library to render components inside the Provider.

Always provide the context value to avoid undefined errors.

Mock different context values to test various component behaviors.

Testing context ensures your components react correctly to context changes.