Reset stateNode in resetWorkInProgress (#18448)

* test(SuspenseList): Add failing test for class component

* Reset stateNode when resetWorkInProgress

This is supposed to put the Fiber into the same state as if it was just
created by child fiber reconciliation. For newly created fibers, that means
that stateNode is null.

Co-authored-by: Sebastian Silbermann <[email protected]>

packages/react-reconciler/src/ReactFiber.js

@@ -542,6 +542,8 @@ export function resetWorkInProgress(
 
     workInProgress.dependencies = null;
 
+    workInProgress.stateNode = null;
+
     if (enableProfilerTimer) {
       // Note: We don't reset the actualTime counts. It's useful to accumulate
       // actual time across multiple render passes.

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

@@ -2485,4 +2485,66 @@ describe('ReactSuspenseList', () => {
       </>,
     );
   });
+
+  it('can resume class components when revealed together', async () => {
+    let A = createAsyncText('A');
+    let B = createAsyncText('B');
+
+    class ClassComponent extends React.Component {
+      render() {
+        return this.props.children;
+      }
+    }
+
+    function Foo() {
+      return (
+        <Suspense fallback={<Text text="Loading" />}>
+          <SuspenseList revealOrder="together">
+            <ClassComponent>
+              <Suspense fallback={<Text text="Loading A" />}>
+                <A />
+              </Suspense>
+            </ClassComponent>
+            <ClassComponent>
+              <Suspense fallback={<Text text="Loading B" />}>
+                <B />
+              </Suspense>
+            </ClassComponent>
+          </SuspenseList>
+        </Suspense>
+      );
+    }
+
+    await A.resolve();
+
+    ReactNoop.render(<Foo />);
+
+    expect(Scheduler).toFlushAndYield([
+      'A',
+      'Suspend! [B]',
+      'Loading B',
+      'Loading A',
+      'Loading B',
+    ]);
+
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span>Loading A</span>
+        <span>Loading B</span>
+      </>,
+    );
+
+    await B.resolve();
+
+    ReactNoop.render(<Foo />);
+
+    expect(Scheduler).toFlushAndYield(['A', 'B']);
+
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span>A</span>
+        <span>B</span>
+      </>,
+    );
+  });
 });