test: run test with react v16 v17 and v18 #392

100terres · 2022-08-20T08:58:36Z

⚠️ easier to review commit per commit

100terres · 2022-08-20T15:02:01Z

src/state/registry/use-registry.ts

  useEffect(() => {
+    // clean up the registry to avoid any leaks
    return function unmount() {
-      // clean up the registry to avoid any leaks
-      // doing it after an animation frame so that other things unmounting
-      // can continue to interact with the registry
-      requestAnimationFrame(registry.clean);
+      // FIXME: we do not know if this is still needed, but to make sure we do not
+      //        break any existing existing code using react 16 and 17 we'll
+      //        continue to clean up after an animation frame
+      //
+      //        The requestAnimationFrame polyfill was added in this commit:
+      //        https://github.com/atlassian/react-beautiful-dnd/pull/1487/commits/8bdffb9d077b0009400620d9cf6575bba7af13dc#diff-b3b2de485fa432e394aebc8abf54be40ad7fac9b39a2ed818fddfd56f1786c53
+      if (React.version.startsWith('16') || React.version.startsWith('17')) {
+        // doing it after an animation frame so that other things unmounting
+        // can continue to interact with the registry
+        requestAnimationFrame(registry.clean);
+      } else {
+        // starting with react v18, we must invoke clean immediately
+        // we won't be able to access the registry after the unmount
+        // more details here: https://beta.reactjs.org/learn/synchronizing-with-effects#how-to-handle-the-effect-firing-twice-in-development
+        registry.clean();
+      }
    };
  }, [registry]);


ℹ️ Usage without the useEffectOnce as we do in hello-pangea/dnd.

100terres · 2022-08-21T00:38:33Z

@Xhale1 this PR is ready for your review 🙂 I've invited you as a maintainer. I'll be able to assign you as a reviewer once you've accept the invitation.

100terres · 2022-08-21T00:41:26Z

.circleci/config.yml

      - test-unit:
+          matrix:
+            parameters:
+              react-major-version: ['16', '17', '18']


ℹ️ This is to run our unit tests three times with a different value in the REACT_MAJOR_VERSION environment variable.

.storybook/main.js

100terres · 2022-08-21T00:42:50Z

.storybook/main.js

+  reactOptions: {
+    strictMode: true,
+  },


ℹ️ strict mode enabled in storybook 🎉

100terres · 2022-08-21T00:58:48Z

.storybook/preview.tsx

+export const decorators: DecoratorFn[] = [
+  (story, { id }: { id: string }) => {
    resetData(id);

-    return <Story key={id} />;
+    return story({ key: id });
  },
-  (Story: React.ElementType): React.ReactElement => (
-    <GlobalStyles>
-      <Story />
-    </GlobalStyles>
-  ),
-  withPerformance,
+  (story) => <GlobalStyles>{story()}</GlobalStyles>,
 ];


ℹ️ There was an issue with the strict mode, because of we were using the story as a component.

see: storybookjs/storybook#15223 (comment)

100terres · 2022-08-21T01:01:12Z

jest.config.ts

+if (['16', '17'].includes(reactMajorVersion)) {
+  config.testPathIgnorePatterns = [
+    ...(config.testPathIgnorePatterns || []),
+    // These test do not requires react and will
+    // be run in the base run (with react v18)
+    'test/unit/docs',
+    'test/unit/health',
+  ];
+  config.cacheDirectory = `.cache/jest-cache-react-${reactMajorVersion}`;
+  config.moduleNameMapper = {
+    '^@testing-library/react((\\/.*)?)$': `@testing-library/react-16-17$1`,
+    '^react-dom((\\/.*)?)$': `react-dom-${reactMajorVersion}$1`,
+    '^react((\\/.*)?)$': `react-${reactMajorVersion}$1`,
+  };
+}


ℹ️ Important peice of code to be able to test with react 16, 17 and 18.

src/view/drag-drop-context/app.tsx

src/view/draggable/draggable.tsx

100terres · 2022-08-21T01:04:11Z

stories/typings.d.ts

+
+// override react-virtualized's types, because the current version
+// uses react 17 types
+declare module 'react-virtualized' {


ℹ️ react-virtualized does not support react 18

test/setup/snapshot-resolver.ts

… react

…emoval

…ct 18) (#392)

… set (#392) also reactor how we manipulate environment variables in our test

…ion of react (#392)

…emoval (#392)

…ct 18) (#392)

… set (#392) also reactor how we manipulate environment variables in our test

…ion of react (#392)

…emoval (#392)

…ct 18) (#392)

… set (#392) also reactor how we manipulate environment variables in our test

100terres changed the base branch from main to react-18 August 20, 2022 14:44

This was referenced Aug 20, 2022

Support react v18 and Strict Mode #293

Closed

test: run test with react v16 v17 and v18 #336

Closed

100terres commented Aug 20, 2022

View reviewed changes

100terres self-assigned this Aug 20, 2022

100terres added the high priority label Aug 20, 2022

100terres force-pushed the 320-run-test-suite-for-react-v16-v17-and-v18-take-2 branch 2 times, most recently from c13f7f7 to c17701b Compare August 20, 2022 17:05

chore: bump deps

1a7ccaa

100terres force-pushed the 320-run-test-suite-for-react-v16-v17-and-v18-take-2 branch 2 times, most recently from 5768ade to 36e97eb Compare August 20, 2022 20:04

100terres linked an issue Aug 21, 2022 that may be closed by this pull request

Run test suite for react v16, v17 and v18 #320

Closed

100terres force-pushed the 320-run-test-suite-for-react-v16-v17-and-v18-take-2 branch from e2c13c9 to 36e97eb Compare August 21, 2022 00:22

100terres marked this pull request as ready for review August 21, 2022 00:35

100terres commented Aug 21, 2022

View reviewed changes

.storybook/main.js Outdated Show resolved Hide resolved

100terres commented Aug 21, 2022

View reviewed changes

src/view/drag-drop-context/app.tsx Outdated Show resolved Hide resolved

100terres commented Aug 21, 2022

View reviewed changes

src/view/draggable/draggable.tsx Outdated Show resolved Hide resolved

100terres commented Aug 21, 2022

View reviewed changes

test/setup/snapshot-resolver.ts Outdated Show resolved Hide resolved

100terres added 6 commits August 20, 2022 22:08

chore: setup jest test to run against the last three major version of…

f3425a7

… react

chore: disable storybook telemetry

e68a30e

chore(storybook): enable strict mode

48bf668

chore: support react-redux@8

0dda3d6

feat(registry): drop ansyc registry clean for react 18+

6d0378d

fix: make sure the droppable exsist in the registry before notify a r…

3df866a

…emoval

100terres added a commit that referenced this pull request Aug 21, 2022

chore: update sizes snapshot (#392)

142563e

100terres added a commit that referenced this pull request Aug 21, 2022

chore(type): fix react-virtualized type (library does not support rea…

b990622

…ct 18) (#392)

100terres added a commit that referenced this pull request Aug 21, 2022

chore(dev-deps): bump cypress and fix specs (#392)

26bf701

100terres added a commit that referenced this pull request Aug 21, 2022

chore(test): fix issue when running test with react major version env…

5ce1957

… set (#392) also reactor how we manipulate environment variables in our test

100terres added a commit that referenced this pull request Aug 21, 2022

chore(deps): bump multiple deps and dev-deps (#392)

da3087b

100terres added a commit that referenced this pull request Aug 21, 2022

chore(test): setup jest test to run against the last three major vers…

b9615fb

…ion of react (#392)

100terres added a commit that referenced this pull request Aug 21, 2022

chore(storybook): disable telemetry (#392)

73f3590

100terres added a commit that referenced this pull request Aug 21, 2022

chore(storybook): enable strict mode (#392)

de24b7e

100terres added a commit that referenced this pull request Aug 21, 2022

chore(deps): support react-redux@8 (#392)

169e39c

100terres added a commit that referenced this pull request Aug 21, 2022

feat(registry): drop ansyc registry clean for react 18+ (#392)

090427b

100terres added a commit that referenced this pull request Aug 21, 2022

fix: make sure the droppable exsist in the registry before notify a r…

71f047a

…emoval (#392)

100terres added a commit that referenced this pull request Aug 21, 2022

fix(react): prevent automatic batching for some state changes (#392)

a7a1231

100terres added a commit that referenced this pull request Aug 21, 2022

test: adjust test to work for react 16, 17 and 18 (#392)

8f80417

100terres added a commit that referenced this pull request Aug 21, 2022

chore: update sizes snapshot (#392)

c3736dd

100terres added a commit that referenced this pull request Aug 21, 2022

chore(type): fix react-virtualized type (library does not support rea…

0a985d1

…ct 18) (#392)

100terres added a commit that referenced this pull request Aug 21, 2022

chore(dev-deps): bump cypress and fix specs (#392)

590ff75

100terres added a commit that referenced this pull request Aug 21, 2022

chore(test): fix issue when running test with react major version env…

08852b7

… set (#392) also reactor how we manipulate environment variables in our test

100terres added a commit that referenced this pull request Aug 21, 2022

chore(deps): bump multiple deps and dev-deps (#392)

adaeefb

100terres added a commit that referenced this pull request Aug 21, 2022

chore(test): setup jest test to run against the last three major vers…

0fdbc22

…ion of react (#392)

100terres added a commit that referenced this pull request Aug 21, 2022

chore(storybook): disable telemetry (#392)

0193604

100terres added a commit that referenced this pull request Aug 21, 2022

chore(storybook): enable strict mode (#392)

ff3017a

100terres added a commit that referenced this pull request Aug 21, 2022

chore(deps): support react-redux@8 (#392)

60d9e51

100terres added a commit that referenced this pull request Aug 21, 2022

feat(registry): drop ansyc registry clean for react 18+ (#392)

3ca8100

100terres added a commit that referenced this pull request Aug 21, 2022

fix: make sure the droppable exsist in the registry before notify a r…

8648c80

…emoval (#392)

100terres added a commit that referenced this pull request Aug 21, 2022

fix(react): prevent automatic batching for some state changes (#392)

cf5e3bd

100terres added a commit that referenced this pull request Aug 21, 2022

test: adjust test to work for react 16, 17 and 18 (#392)

5b3f3a6

100terres added a commit that referenced this pull request Aug 21, 2022

chore: update sizes snapshot (#392)

180f7f6

100terres added a commit that referenced this pull request Aug 21, 2022

chore(type): fix react-virtualized type (library does not support rea…

2e186c3

…ct 18) (#392)

100terres added a commit that referenced this pull request Aug 21, 2022

chore(dev-deps): bump cypress and fix specs (#392)

5fffa27

100terres added a commit that referenced this pull request Aug 21, 2022

chore(test): fix issue when running test with react major version env…

bd0cce2

… set (#392) also reactor how we manipulate environment variables in our test

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

test: run test with react v16 v17 and v18 #392

test: run test with react v16 v17 and v18 #392

100terres commented Aug 20, 2022 •

edited

Loading

100terres Aug 20, 2022 •

edited

Loading

100terres commented Aug 21, 2022

100terres Aug 21, 2022 •

edited

Loading

100terres Aug 21, 2022 •

edited

Loading

100terres Aug 21, 2022 •

edited

Loading

100terres Aug 21, 2022 •

edited

Loading

100terres Aug 21, 2022 •

edited

Loading

test: run test with react v16 v17 and v18 #392

test: run test with react v16 v17 and v18 #392

Conversation

100terres commented Aug 20, 2022 • edited Loading

100terres Aug 20, 2022 • edited Loading

Choose a reason for hiding this comment

100terres commented Aug 21, 2022

100terres Aug 21, 2022 • edited Loading

Choose a reason for hiding this comment

100terres Aug 21, 2022 • edited Loading

Choose a reason for hiding this comment

100terres Aug 21, 2022 • edited Loading

Choose a reason for hiding this comment

100terres Aug 21, 2022 • edited Loading

Choose a reason for hiding this comment

100terres Aug 21, 2022 • edited Loading

Choose a reason for hiding this comment

100terres commented Aug 20, 2022 •

edited

Loading

100terres Aug 20, 2022 •

edited

Loading

100terres Aug 21, 2022 •

edited

Loading

100terres Aug 21, 2022 •

edited

Loading

100terres Aug 21, 2022 •

edited

Loading

100terres Aug 21, 2022 •

edited

Loading

100terres Aug 21, 2022 •

edited

Loading