add siblings Timeout components test case (#12862)

Author: cyan33

packages/react-reconciler/src/__tests__/ReactSuspense-test.internal.js

@@ -139,6 +139,53 @@ describe('ReactSuspense', () => {
     expect(ReactNoop.getChildren()).toEqual([span('A'), span('B')]);
   });
 
+  it('suspends siblings and later recovers each independently', async () => {
+    // Render two sibling Timeout components
+    ReactNoop.render(
+      <Fragment>
+        <Fallback timeout={1000} placeholder={<Text text="Loading A..." />}>
+          <AsyncText text="A" ms={5000} />
+        </Fallback>
+        <Fallback timeout={3000} placeholder={<Text text="Loading B..." />}>
+          <AsyncText text="B" ms={6000} />
+        </Fallback>
+      </Fragment>,
+    );
+    expect(ReactNoop.flush()).toEqual(['Suspend! [A]', 'Suspend! [B]']);
+    expect(ReactNoop.getChildren()).toEqual([]);
+
+    // Advance time by enough to timeout both components and commit their placeholders
+    ReactNoop.expire(4000);
+    await advanceTimers(4000);
+
+    expect(ReactNoop.flush()).toEqual([
+      'Suspend! [A]',
+      'Loading A...',
+      'Suspend! [B]',
+      'Loading B...',
+    ]);
+    expect(ReactNoop.getChildren()).toEqual([
+      span('Loading A...'),
+      span('Loading B...'),
+    ]);
+
+    // Advance time by enough that the first Timeout's promise resolves
+    // and switches back to the normal view. The second Timeout should still show the placeholder
+    ReactNoop.expire(1000);
+    await advanceTimers(1000);
+
+    expect(ReactNoop.flush()).toEqual(['Promise resolved [A]', 'A']);
+    expect(ReactNoop.getChildren()).toEqual([span('A'), span('Loading B...')]);
+
+    // Advance time by enough that the second Timeout's promise resolves
+    // and switches back to the normal view
+    ReactNoop.expire(1000);
+    await advanceTimers(1000);
+
+    expect(ReactNoop.flush()).toEqual(['Promise resolved [B]', 'B']);
+    expect(ReactNoop.getChildren()).toEqual([span('A'), span('B')]);
+  });
+
   it('continues rendering siblings after suspending', async () => {
     ReactNoop.render(
       <Fallback>