Mocking a Router for Isolated Component Testing in Jest (TypeScript)

Testing components that rely on routing can be tricky, as you don't want your tests to actually navigate the application. This challenge asks you to create a mock router object that mimics the behavior of a typical React Router v6 (or similar) router, allowing you to isolate and test your components without real navigation. This is crucial for writing fast, reliable, and focused unit tests.

Problem Description

You need to implement a mock router object in TypeScript that can be used in Jest tests to simulate routing behavior within React components. This mock router should provide a minimal API sufficient for testing component rendering and behavior based on the current route. Specifically, the mock router should have the following properties and methods:

• pathname: string: A property representing the current route path (e.g., "/home", "/products/123").
• navigate(path: string, options?: { replace?: boolean }): void: A method that simulates navigation to a new route. It should update the pathname property. The options parameter allows for specifying whether the navigation should replace the current history entry (similar to replace in React Router).
• location: { pathname: string, search: string }: A property that mimics the location object from React Router. It should contain the current pathname and an empty search string.

The mock router should be designed to be easily replaceable in your component tests, allowing you to control the route and verify how your component reacts to different routing scenarios.

Examples

Example 1:

Input: Initial state: pathname = "/home"
       Action: navigate("/products/123")
Output: pathname = "/products/123"
Explanation: The navigate function updates the pathname to the new route.

Example 2:

Input: Initial state: pathname = "/products"
       Action: navigate("/about", { replace: true })
Output: pathname = "/about"
Explanation: The navigate function updates the pathname and replaces the current history entry.

Example 3:

Input: Initial state: pathname = "/dashboard"
Output: { pathname: "/dashboard", search: "" }
Explanation: The location property returns an object with the current pathname and an empty search string.

Constraints

• The mock router must be implemented in TypeScript.
• The navigate method should update the pathname property directly.
• The location property should always have an empty search string.
• The mock router should be lightweight and easy to understand.
• The navigate method should accept an optional options object with a replace boolean property. If replace is true, the navigation should replace the current history entry. If replace is false (or omitted), the navigation should add a new entry to the history.

Notes

• Consider using a simple class or object to implement the mock router.
• Focus on providing the essential functionality needed for component testing. You don't need to implement all the features of a full-fledged router.
• Think about how you would use this mock router in a Jest test case. This will help you ensure that it meets your needs.
• The search property of the location object is not required to be functional, just present with an empty string value.