Mocking Mutations in Jest with TypeScript

Testing components that modify data or state can be tricky. Directly manipulating the DOM or external services during tests can lead to unpredictable results and slow down your test suite. This challenge focuses on implementing a mutation mock in Jest using TypeScript, allowing you to isolate and control these mutations for more reliable and efficient testing.

Problem Description

You are tasked with creating a Jest mock function that simulates a mutation operation. Specifically, you need to mock a function called updateData which is expected to modify an object passed to it. The mock should:

1. Accept an object as an argument: This object represents the data to be mutated.
2. Simulate a mutation: Instead of actually modifying the object, the mock should replace the original object with a new object containing the updated values. This ensures the original object remains unchanged, preventing side effects in your tests.
3. Return the new, mutated object: The mock should return the newly created object with the updated properties.
4. Track calls: The mock should track the arguments passed to it, allowing you to verify that the updateData function was called with the expected data.

This is useful for testing components that rely on updateData without actually performing the mutation, allowing you to focus on the component's behavior based on the result of the mutation.

Examples

Example 1:

Input:
updateData = {
  __proto__: {
    mockImplementation: () => {}
  }
};

const originalData = { id: 1, name: 'Initial Name' };

updateData.mockImplementation((data) => {
  return { ...data, name: 'Updated Name' };
});

Output:
{ id: 1, name: 'Updated Name' }
Explanation: The mock function receives `originalData`. It creates a new object with the same properties as `originalData` but with the `name` property updated to 'Updated Name'. The new object is returned, and `originalData` remains unchanged.  `updateData.mock.calls` will contain `[{ id: 1, name: 'Initial Name' }]`.

**Example 2:**

Input: updateData = { proto: { mockImplementation: () => {} } };

const originalData = { id: 2, name: 'Another Initial Name', status: 'pending' };

updateData.mockImplementation((data) => { return { ...data, status: 'completed' }; });

Output: { id: 2, name: 'Another Initial Name', status: 'completed' } Explanation: Similar to Example 1, the mock creates a new object based on originalData, updating the status property. The new object is returned. updateData.mock.calls will contain [{ id: 2, name: 'Another Initial Name', status: 'pending' }].

Example 3: (Edge Case - Empty Object)

Input:
updateData = {
  __proto__: {
    mockImplementation: () => {}
  }
};

const originalData = {};

updateData.mockImplementation((data) => {
  return { ...data, newProperty: 'added' };
});

Output:
{ newProperty: 'added' }
Explanation: The mock receives an empty object. It creates a new object with a single property, `newProperty`, and returns it. `updateData.mock.calls` will contain `[{}]`.

## Constraints

-   The mock function must be implemented using Jest's `mockImplementation` method.
-   The mock function must return a *new* object, not modify the original object passed as an argument.
-   The mock function must track the arguments passed to it using `mock.calls`.
-   The input object can have any number of properties and any data types for those properties.
-   The mock function should handle empty objects gracefully.

## Notes

-   Consider using the spread operator (`...`) to create a shallow copy of the input object before adding or modifying properties. This ensures immutability.
-   Think about how to verify that the mock function was called with the correct arguments after the test is complete.  `updateData.mock.calls` is your friend.
-   This problem focuses on the core mocking logic.  You don't need to worry about the specific component being tested or the context in which `updateData` is used.  Just focus on creating a robust and reliable mock.