Mocking React Context in Jest

Testing components that consume React Context can be tricky because you need to ensure the component receives the expected values from the context provider. This challenge focuses on creating mock context providers within your Jest tests to isolate the component under test and verify its behavior based on different context values. This is crucial for writing robust and reliable unit tests.

Problem Description

You are tasked with creating a reusable function that generates mock context providers for Jest tests. This function should accept a context object and a value object, and return a mock provider component that renders a child component within the provided context. The mock provider should allow you to easily simulate different context values during testing, ensuring your component behaves as expected under various conditions.

What needs to be achieved:

• Create a function createMockContextProvider that takes a context object (e.g., React.createContext<MyContextType>) and a value object as input.
• The function should return a React component that acts as a mock context provider.
• When this mock provider is rendered, it should provide the specified value to its children.
• The mock provider should be easily usable within a Jest test setup.

Key Requirements:

• The function must be compatible with React 18 and later.
• The mock provider should not interfere with other tests.
• The mock provider should be simple and easy to understand.
• The mock provider should correctly provide the specified value to its children.

Expected Behavior:

When a component consumes the mocked context, it should receive the value provided to the createMockContextProvider function. Assertions within your tests should verify that the component renders correctly based on this mocked context value.

Edge Cases to Consider:

• The context type might be complex. The mock provider should handle any valid context value.
• The mock provider might be nested within other components. The value should still be correctly provided to the consuming component.
• Consider how to handle potential errors if the context object is invalid. (While not strictly required, graceful handling is a plus).

Examples

Example 1:

// Assume MyContext is created elsewhere: const MyContext = React.createContext<MyContextType | undefined>(undefined);

// Input:
// MyContext, { name: "John", age: 30 }

// Output: A React component that, when rendered, provides { name: "John", age: 30 } to its children via MyContext.

// Explanation: The mock provider wraps the child component and sets the context value to { name: "John", age: 30 } during rendering.

Example 2:

// Assume AuthContext is created elsewhere: const AuthContext = React.createContext<AuthContextType | undefined>(undefined);

// Input:
// AuthContext, { isLoggedIn: false }

// Output: A React component that, when rendered, provides { isLoggedIn: false } to its children via AuthContext.

// Explanation: Similar to Example 1, but using a different context and value.

Example 3: (Edge Case - Complex Context Type)

// Assume UserContext is created elsewhere: const UserContext = React.createContext<UserContextType | undefined>(undefined);

// Input:
// UserContext, { user: { id: 123, username: "testuser", roles: ["admin"] }, loading: true }

// Output: A React component that, when rendered, provides { user: { id: 123, username: "testuser", roles: ["admin"] }, loading: true } to its children via UserContext.

// Explanation: Demonstrates handling a more complex context value with nested objects and arrays.

Constraints

• The function must be written in TypeScript.
• The function should be relatively concise and easy to understand.
• The mock provider component should be a functional component.
• The function should not rely on external libraries beyond React.
• The function should be compatible with React 18 and later.

Notes

• Consider using React's createContext and useContext hooks internally.
• Think about how to make the mock provider reusable across different tests.
• The focus is on creating the mock provider function, not on writing the tests that use it. You'll need to integrate this function into your Jest test setup.
• The value object passed to the function can be of any type, as long as it matches the context's type definition.