Fast Refresh: test cyclic dependencies (#12161)

Co-authored-by: JJ Kasper <[email protected]>

test/acceptance/ReactRefresh.test.js

@@ -112,3 +112,162 @@ test('can recover from a syntax error without losing state', async () => {
 
   await cleanup()
 })
+
+test('cyclic dependencies', async () => {
+  const [session, cleanup] = await sandbox()
+
+  await session.write(
+    'NudgeOverview.js',
+    `
+      import * as React from 'react';
+
+      import { foo } from './routes';
+
+      const NudgeOverview = () => {
+        return <span />;
+        foo;
+      };
+
+      export default NudgeOverview;
+    `
+  )
+
+  await session.write(
+    'SurveyOverview.js',
+    `
+      const SurveyOverview = () => {
+        return 100;
+      };
+
+      export default SurveyOverview;
+    `
+  )
+
+  await session.write(
+    'Milestones.js',
+    `
+      import React from 'react';
+
+      import { fragment } from './DashboardPage';
+
+      const Milestones = props => {
+        return <span />;
+        fragment;
+      };
+
+      export default Milestones;
+    `
+  )
+
+  await session.write(
+    'DashboardPage.js',
+    `
+      import React from 'react';
+
+      import Milestones from './Milestones';
+      import SurveyOverview from './SurveyOverview';
+      import NudgeOverview from './NudgeOverview';
+
+      export const fragment = {};
+
+      const DashboardPage = () => {
+        return (
+          <>
+            <Milestones />
+            <SurveyOverview />
+            <NudgeOverview />
+          </>
+        );
+      };
+
+      export default DashboardPage;
+    `
+  )
+
+  await session.write(
+    'routes.js',
+    `
+      import DashboardPage from './DashboardPage';
+
+      export const foo = {};
+
+      console.warn('DashboardPage at import time:', DashboardPage);
+      setTimeout(() => console.warn('DashboardPage after:', DashboardPage), 0);
+
+      export default DashboardPage;
+    `
+  )
+
+  await session.patch(
+    'index.js',
+    `
+      import * as React from 'react';
+
+      import DashboardPage from './routes';
+
+      const HeroApp = (props) => {
+        return <p>Hello. {DashboardPage ? <DashboardPage /> : null}</p>;
+      };
+
+      export default HeroApp;
+    `
+  )
+
+  expect(
+    await session.evaluate(() => document.querySelector('p').textContent)
+  ).toBe('Hello. 100')
+
+  let didFullRefresh = !(await session.patch(
+    'SurveyOverview.js',
+    `
+      const SurveyOverview = () => {
+        return 200;
+      };
+
+      export default SurveyOverview;
+    `
+  ))
+
+  expect(
+    await session.evaluate(() => document.querySelector('p').textContent)
+  ).toBe('Hello. 200')
+  expect(didFullRefresh).toBe(false)
+
+  didFullRefresh = !(await session.patch(
+    'index.js',
+    `
+      import * as React from 'react';
+
+      import DashboardPage from './routes';
+
+      const HeroApp = (props) => {
+        return <p>Hello: {DashboardPage ? <DashboardPage /> : null}</p>;
+      };
+
+      export default HeroApp;
+    `
+  ))
+
+  expect(
+    await session.evaluate(() => document.querySelector('p').textContent)
+  ).toBe('Hello: 200')
+  expect(didFullRefresh).toBe(false)
+
+  didFullRefresh = !(await session.patch(
+    'SurveyOverview.js',
+    `
+      const SurveyOverview = () => {
+        return 300;
+      };
+
+      export default SurveyOverview;
+    `
+  ))
+
+  expect(
+    await session.evaluate(() => document.querySelector('p').textContent)
+  ).toBe('Hello: 300')
+  expect(didFullRefresh).toBe(false)
+
+  await cleanup()
+})