Bug:

[Abhimanuchauhan01]

The custom Jest matchers introduced for async operations in the React Test Renderer (toFlushAll, toFlushThrough, toFlushAndThrow, toClearYields) throw unexpected errors in specific scenarios involving yielded values. These errors prevent the test suite from running as expected when handling complex async updates.

React version:
18.2.0

Steps To Reproduce

1.Install React Test Renderer and add the custom Jest matchers.
2.Write a test using the toFlushAll matcher on a component rendering async updates.
3.Run the test suite and observe the unexpected behavior during flushing.

Link to code example:
link : https://codesandbox.io/p/sandbox/new
code:
import React from "react";
import TestRenderer, { act } from "react-test-renderer";

describe("React Test Renderer Async Matchers", () => {
it("throws an unexpected error with toFlushAll", () => {
const MyComponent = () => {
const [state, setState] = React.useState(0);
React.useEffect(() => {
setTimeout(() => setState(1), 1000);
}, []);
return

{state}

;
};

const renderer = TestRenderer.create(<MyComponent />);

expect(() => {
  act(() => {
    jest.runAllTimers();
    renderer.unstable_flushAll(); // Fails here with an unexpected error
  });
}).not.toThrow();

});
});

The current behavior

When using toFlushAll, the test fails unexpectedly with a TypeError, preventing it from completing the async operations. The issue occurs when the matcher processes components with multiple nested yields.

The expected behavior

The toFlushAll matcher should flush all pending async updates and yield the correct values without throwing errors. It should handle components with nested async updates seamlessly.