Testing React useReducer with Jest

This challenge focuses on writing robust unit tests for a React component that utilizes the useReducer hook. Testing reducers is crucial for ensuring predictable state management within your React applications. We will use Jest to simulate component behavior and verify that the reducer correctly handles different actions.

Problem Description

Your task is to write Jest tests for a React component that manages a simple counter using the useReducer hook. The component should allow users to increment, decrement, and reset the counter. You need to ensure that your tests cover all possible actions dispatched to the reducer and verify that the state updates as expected.

Key Requirements:

• Create a mock reducer function that mimics the behavior of a real useReducer reducer.
• Write Jest tests to assert the output of this mock reducer for different action types.
• Test the initial state of the reducer.
• Test the state after dispatching increment, decrement, and reset actions.
• Consider edge cases like decrementing from zero.

Expected Behavior:

• The reducer should return a new state object based on the current state and the dispatched action.
• Incrementing should increase the count by 1.
• Decrementing should decrease the count by 1, with a safeguard to prevent going below zero.
• Resetting should set the count back to its initial value.

Examples

Example 1: Initial State

// Assume initial state is { count: 0 }
// Assume action is { type: '@@INIT' } or no action for initial call

Output:

{ "count": 0 }

Explanation: When the reducer is first initialized or receives a special @@INIT action, it should return the defined initial state.

Example 2: Increment Action

// Current state: { count: 5 }
// Action: { type: 'increment' }

Output:

{ "count": 6 }

Explanation: The increment action increases the current count by 1.

Example 3: Decrement Action (Normal)

// Current state: { count: 3 }
// Action: { type: 'decrement' }

Output:

{ "count": 2 }

Explanation: The decrement action decreases the current count by 1.

Example 4: Decrement Action (Edge Case - Zero)

// Current state: { count: 0 }
// Action: { type: 'decrement' }

Output:

{ "count": 0 }

Explanation: When the count is already 0 and a decrement action is dispatched, the state should remain at 0 to prevent negative counts.

Example 5: Reset Action

// Current state: { count: 10 }
// Action: { type: 'reset' }

Output:

{ "count": 0 }

Explanation: The reset action sets the count back to its initial value (0 in this case).

Constraints

• The state will be a simple object with a count property of type number.
• Actions will be objects with a type property (string) and optionally a payload (though not used in this specific reducer).
• Tests should be written in TypeScript.
• Use Jest for testing.

Notes

• You'll need to define the types for your state and actions to leverage TypeScript's benefits.
• Consider how you would mock useReducer if you were testing a full component, but for this challenge, focus on testing the reducer logic directly.
• Think about immutability: reducers should always return new state objects, not mutate the existing ones. Your tests should implicitly verify this if you compare the returned state with the original.