Testing useMemo with Jest: Ensuring Referential Equality

useMemo in React is a powerful hook for optimizing performance by memoizing expensive calculations. However, verifying that useMemo is functioning correctly – specifically, that it's returning the same memoized value when dependencies haven't changed – requires robust testing. This challenge focuses on writing Jest tests to confirm that useMemo behaves as expected, ensuring referential equality of the memoized value across renders when dependencies remain constant.

Problem Description

You are tasked with creating Jest tests for a React component that utilizes useMemo. The component performs an expensive calculation and memoizes the result using useMemo. Your tests should verify that:

1. The memoized value remains the same (referentially equal) across multiple renders when the dependencies of useMemo haven't changed.
2. The memoized value changes (is a new object/array/primitive) when the dependencies of useMemo have changed.
3. The component renders correctly, utilizing the memoized value.

The component you'll be testing is provided below. You need to write Jest tests that cover the scenarios described above. Assume the expensive calculation is represented by a simple function that creates a new array.

Key Requirements:

• Use jest.mock to mock useMemo for controlled testing.
• Use expect.objectContaining or similar assertions to verify the contents of the memoized value, not just strict equality.
• Ensure your tests cover both cases: dependencies unchanged (memoized value should be the same) and dependencies changed (memoized value should be different).
• The tests should be readable and well-structured.

Examples

Example 1:

Input: Component renders with dependency 'a' being 1, and then renders again with 'a' still being 1.
Output: The memoized value is the *same object* across both renders.
Explanation: `useMemo` should return the same memoized value because the dependency 'a' hasn't changed.

Example 2:

Input: Component renders with dependency 'a' being 1, and then renders again with 'a' being 2.
Output: The memoized value is a *different object* across the two renders.
Explanation: `useMemo` should recalculate and return a new memoized value because the dependency 'a' has changed.

Example 3: (Edge Case - Dependency is an object)

Input: Component renders with dependency being {b: 1}, and then renders again with dependency being {b: 1}.
Output: The memoized value is the *same object* across both renders.
Explanation: Even though it's an object, the reference is the same.

Constraints

• You must use Jest and React Testing Library.
• The component to be tested is provided below. Do not modify the component itself.
• The expensive calculation is represented by calculateExpensiveValue.
• The tests should be written in TypeScript.
• The tests should be reasonably performant (avoid unnecessary re-renders).

Notes

• Consider using jest.mock to replace the actual useMemo hook with a mock implementation that allows you to control its return value and track how many times it's called.
• Pay close attention to referential equality (using ===) when comparing the memoized values.
• Think about how to effectively mock the dependencies to simulate different scenarios.
• The calculateExpensiveValue function is a placeholder for a more complex calculation. Its specific implementation is not important for the purpose of this test.

Component to be tested:

import React, { useMemo } from 'react';

const calculateExpensiveValue = (a: number): number[] => {
  console.log('Calculating expensive value...'); // For debugging
  return Array.from({ length: a }, (_, i) => i + 1);
};

interface Props {
  a: number;
}

const MyComponent = ({ a }: Props) => {
  const memoizedValue = useMemo(() => calculateExpensiveValue(a), [a]);

  return <div>{JSON.stringify(memoizedValue)}</div>;
};

export default MyComponent;