fix: support multiple synchronous timings for act (#4619)

* fix: support multiple synchronous timings for act

* add unit test

* addressed code feed back

* Update test-utils/test/shared/act.test.js

Co-authored-by: Jovi De Croock <[email protected]>

* fix lint

---------

Co-authored-by: Jovi De Croock <[email protected]>

test-utils/src/index.js

@@ -57,19 +57,19 @@ export function act(cb) {
 	const rerender = setupRerender();
 
 	/** @type {() => void} */
-	let flush, toFlush;
+	let flushes = [], toFlush;
 
 	// Override requestAnimationFrame so we can flush pending hooks.
-	options.requestAnimationFrame = fc => (flush = fc);
+	options.requestAnimationFrame = fc => flushes.push(fc);
 
 	const finish = () => {
 		try {
 			rerender();
-			while (flush) {
-				toFlush = flush;
-				flush = null;
+			while (flushes.length) {
+				toFlush = flushes;
+				flushes = [];
 
-				toFlush();
+				toFlush.forEach(x => x());
 				rerender();
 			}
 		} catch (e) {

test-utils/test/shared/act.test.js

@@ -516,4 +516,54 @@ describe('act', () => {
 			});
 		});
 	});
+
+	describe('act function with finish implementations', () => {
+		beforeEach(function () {
+			options.requestAnimationFrame = null;
+		});
+
+		it('should execute the flush callback using single flush', () => {
+			let called = false;
+
+			act(() => {
+				options.requestAnimationFrame(() => {
+					called = true;
+				});
+			});
+
+			expect(called).to.be.true;
+		});
+
+		it('should execute all callbacks using array flush', () => {
+			let callCount = 0;
+
+			act(() => {
+				options.requestAnimationFrame(() => callCount++);
+				options.requestAnimationFrame(() => callCount++);
+				options.requestAnimationFrame(() => callCount++);
+			});
+
+			expect(callCount).to.equal(3);
+		});
+
+		it('should handle errors in single flush', () => {
+			expect(() => {
+				act(() => {
+					options.requestAnimationFrame(() => {
+						throw new Error('Single flush error');
+					});
+				});
+			}).to.throw('Single flush error');
+		});
+
+		it('should handle errors in array flush', () => {
+			expect(() => {
+				act(() => {
+					options.requestAnimationFrame(() => {
+						throw new Error('Array flush error');
+					});
+				});
+			}).to.throw('Array flush error');
+		});
+	});
 });