Skip to content

Commit 5a0d672

Browse files
[LG-5480] chore: Enables React 17 testing (#3110)
* Component compat * .ts compat * PolymorphicRenderFunctionReturnType * sync spec files * update Link & BackLink specs * Update useEchart.spec.ts * Update index.ts * Update FormField.spec.tsx * restore Popover.spec.tsx ts expect error * Update PasswordInput.spec.tsx * select spec * packages/table/src/utils/stories.testutils.tsx * sync ts files * @ts-ignore React18 * packages/popover/src/Popover/Popover.spec.tsx * Refresh RTLOverrides * packages/toast/src/InternalToast/InternalToast.stories.tsx * fix render hook * Update ExpandedContent.spec.tsx * charts/core/src/ChartContext/ChartContext.spec.tsx * changesets * renderDescendantsTestContext * cleanup tooltip tests * bump popover-polyfill * fix ToggleEvent type import * test(date-picker): wrap timer advancement in waitFor * test(getAllPackages): ensure temporary directories * Creates R17 init script * Delete install-react17.ts * Update react17.yml * Update init.ts * cleanup tsconfigs * Update package.json * install lodash. rm gh-pages * init defaults deep * rm clean from init script * lint * feat: add lib exists type * lint exports * storyoobk addon typoe * chore: update react17 files * Delete init.ts * lint * add separate R17 build & test jobs * Squashed commit of the following: commit 87dc0b6 Author: Adam Thompson <[email protected]> Date: Wed Sep 10 13:22:33 2025 -0400 [LG-5490] chore: React17 compatibility (#3101) * Component compat * .ts compat * PolymorphicRenderFunctionReturnType * sync spec files * update Link & BackLink specs * Update useEchart.spec.ts * Update index.ts * Update FormField.spec.tsx * restore Popover.spec.tsx ts expect error * Update PasswordInput.spec.tsx * select spec * packages/table/src/utils/stories.testutils.tsx * sync ts files * @ts-ignore React18 * packages/popover/src/Popover/Popover.spec.tsx * Refresh RTLOverrides * packages/toast/src/InternalToast/InternalToast.stories.tsx * fix render hook * Update ExpandedContent.spec.tsx * charts/core/src/ChartContext/ChartContext.spec.tsx * changesets * renderDescendantsTestContext * cleanup tooltip tests * bump popover-polyfill * fix ToggleEvent type import * test(date-picker): wrap timer advancement in waitFor * test(getAllPackages): ensure temporary directories * chore(testing-lib): RTL overrides re-organization (#3114) * Updates internal structure of RTL overrides * Update rtl-overrides.md * fix git mv * Update hooks.spec.tsx * fix act * Squashed commit of the following: commit 87dc0b6 Author: Adam Thompson <[email protected]> Date: Wed Sep 10 13:22:33 2025 -0400 [LG-5490] chore: React17 compatibility (#3101) * Component compat * .ts compat * PolymorphicRenderFunctionReturnType * sync spec files * update Link & BackLink specs * Update useEchart.spec.ts * Update index.ts * Update FormField.spec.tsx * restore Popover.spec.tsx ts expect error * Update PasswordInput.spec.tsx * select spec * packages/table/src/utils/stories.testutils.tsx * sync ts files * @ts-ignore React18 * packages/popover/src/Popover/Popover.spec.tsx * Refresh RTLOverrides * packages/toast/src/InternalToast/InternalToast.stories.tsx * fix render hook * Update ExpandedContent.spec.tsx * charts/core/src/ChartContext/ChartContext.spec.tsx * changesets * renderDescendantsTestContext * cleanup tooltip tests * bump popover-polyfill * fix ToggleEvent type import * test(date-picker): wrap timer advancement in waitFor * test(getAllPackages): ensure temporary directories * no --frozen-lockfile * [LG-5354, LG-5461] fix(Polymorphic) Updates Polymorphic return types (#3111) * PolymorphicRenderFunctionReturnType * propTypes * tsdoc * Create poly-types.md * Update poly-types.md * Create poly-types.md * pkg json scripts * rename PolymorphicReturnType * Update Polymorphic.hooks.tsx * Update Polymorphic.hooks.tsx * rm pre-install step * Adds polymorphic tests to assert event type * fix: Fixes tests failing in React 17 (#3112) * Update r17-packages.json * Update transformToNestedData.spec.ts * Update DrawerToolbarContext.spec.tsx * Update Message.spec.tsx * WIP resizable * Update setup.js * useResizable * Update useScreenReaderAnnouncer.tsx * Update ProgressBar.spec.tsx * changeset * Update .changeset/progress-bar-strict.md * Update react17.yml * Update react17.yml * Update react17.yml * export isReact17 * Update transformToNestedData.spec.ts * Update transformToNestedData.spec.ts * rm cache: false * useDrawerToolbarContext tests * consistent queryByRole
1 parent 87dc0b6 commit 5a0d672

File tree

52 files changed

+789
-443
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

52 files changed

+789
-443
lines changed

.changeset/lib-exists.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@leafygreen-ui/lib': minor
3+
---
4+
5+
Exports `Exists` utility type

.changeset/lint-exports.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@lg-tools/lint': minor
3+
---
4+
5+
Lists `/config` directory in package "exports"

.changeset/poly-types.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@leafygreen-ui/polymorphic': minor
3+
---
4+
5+
Updates `PolymorphicRenderFunctionReturnType` to reflect the discrepancy between React 17 & React 18 function component return types - [LG-5354](https://jira.mongodb.org/browse/LG-5354)

.changeset/progress-bar-strict.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@leafygreen-ui/progress-bar': patch
3+
---
4+
5+
Updates ProgressBar `useScreenReaderAnnouncer` to deterministically return a consistent status message (primarily a concern in React 17 strict mode)

.changeset/rtl-overrides.md

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,5 +2,6 @@
22
'@leafygreen-ui/testing-lib': minor
33
---
44

5-
Exports types `RenderHookOptions` & `RenderHookResult`.
6-
Updates type signature of `renderHook`
5+
- Exports types `RenderHookOptions` & `RenderHookResult`.
6+
- Updates type signature of `renderHook`
7+
- Updates internal structure of RTL override files

.changeset/storybook-addon-type.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@lg-tools/storybook-addon': patch
3+
---
4+
5+
Updates Preview type with `Storybook7CompatiblePreviewType` in order to support multiple Storybook versions

.github/workflows/react17.yml

Lines changed: 72 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -10,19 +10,31 @@ concurrency:
1010
cancel-in-progress: true
1111

1212
jobs:
13-
react17:
14-
name: Test in React 17
13+
build:
14+
name: Build in React 17
1515
runs-on: ubuntu-latest
16-
# Disable this job until we can reliably test in React 17
17-
# (or until we can remove the React 17 tests)
18-
if: false
16+
outputs:
17+
cache-primary-key: ${{ steps.build-cache.outputs.cache-primary-key }}
1918
steps:
2019
- uses: actions/checkout@v4
2120

2221
- name: pnpm
2322
uses: pnpm/action-setup@v4
2423
with:
2524
version: 9.15.0
25+
cache: false
26+
27+
- uses: actions/cache/restore@v4
28+
name: Check for build cache
29+
id: build-cache
30+
with:
31+
# Note: `path` doesn't like complex glob patterns (i.e. `+(charts|chat|packages|tools)`)
32+
path: |
33+
charts/*/dist/*
34+
chat/*/dist/*
35+
packages/*/dist/*
36+
tools/*/dist/*
37+
key: ${{ runner.os }}-REACT17-build-cache-${{ hashFiles('package.json', 'pnpm-lock.yaml', '**/src/') }}
2638

2739
- name: Setup Node 18
2840
uses: actions/setup-node@v4
@@ -32,17 +44,64 @@ jobs:
3244
- name: Install node-gyp
3345
run: pnpm add --global node-gyp
3446

35-
- name: Install package.json
36-
run: pnpm install --prefer-offline
37-
38-
- name: Build CLI
39-
run: pnpm build:cli
47+
- name: Init React 17 environment
48+
run: node ./scripts/react17/init.mjs
4049

41-
- name: Install testing tools for React 17
42-
run: npx ts-node tools/test/scripts/install-react17.ts
50+
- name: Install packages
51+
run: pnpm install --prefer-offline # Intentionally not using --frozen-lockfile to allow for pnpm-lock.yaml updates
4352

4453
- name: Build packages
4554
run: pnpm build
4655

56+
- uses: actions/cache/save@v4
57+
name: Save build cache
58+
if: ${{ steps.build-cache.outputs.cache-hit != 'true' }}
59+
with:
60+
path: |
61+
charts/*/dist/*
62+
chat/*/dist/*
63+
packages/*/dist/*
64+
tools/*/dist/*
65+
key: ${{ steps.build-cache.outputs.cache-primary-key }}
66+
67+
test:
68+
name: Test in React 17
69+
runs-on: ubuntu-latest
70+
needs: [build]
71+
steps:
72+
- name: Checkout code
73+
uses: actions/checkout@v4
74+
75+
- name: Install pnpm
76+
uses: pnpm/action-setup@v4
77+
with:
78+
version: 9.15.0
79+
cache: false
80+
81+
- uses: actions/cache/restore@v4
82+
name: Check for build cache
83+
id: build-cache
84+
with:
85+
path: |
86+
charts/*/dist/*
87+
chat/*/dist/*
88+
packages/*/dist/*
89+
tools/*/dist/*
90+
key: ${{needs.build.outputs.cache-primary-key}}
91+
92+
- name: Setup Node 18
93+
uses: actions/setup-node@v4
94+
with:
95+
node-version: 18
96+
97+
- name: Install node-gyp
98+
run: pnpm add --global node-gyp
99+
100+
- name: Init React 17 environment
101+
run: node ./scripts/react17/init.mjs
102+
103+
- name: Install dependencies
104+
run: pnpm install --prefer-offline # Intentionally not using --frozen-lockfile to allow for pnpm-lock.yaml updates
105+
47106
- name: Run tests in React 17
48-
run: pnpm run test --react17
107+
run: pnpm run test --react17 --ci

chat/leafygreen-chat-provider/tsconfig.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,6 @@
99
},
1010
{
1111
"path": "../../packages/leafygreen-provider"
12-
},
12+
}
1313
]
1414
}

chat/message/src/Message/Message.spec.tsx

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -85,7 +85,6 @@ describe('Message', () => {
8585
Variant.Compact,
8686
);
8787

88-
expect(consoleOnce.warn).toHaveBeenCalledTimes(1);
8988
expect(consoleOnce.warn).toHaveBeenCalledWith(
9089
expect.stringContaining("only used in the 'spacious' variant"),
9190
);

package.json

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
},
1111
"scripts": {
1212
"init": "pnpm install && pnpm build",
13-
"init17": "pnpm install && pnpm build:cli && npx ts-node tools/test/scripts/install-react17.ts && pnpm build",
13+
"init:react17": "pnpm clean; npx node ./scripts/react17/init.mjs; pnpm run init",
1414
"create-package": "lg create",
1515
"build": "turbo run build tsc",
1616
"build:cli": "turbo run build tsc --filter=@lg-tools/cli",
@@ -19,7 +19,7 @@
1919
"build:ts-downlevel": "pnpm recursive exec lg-ts-downlevel",
2020
"build-storybook": "npx storybook build",
2121
"chromatic": "npx chromatic",
22-
"clean": "npm-run-all --parallel clean:*",
22+
"clean": "npx npm-run-all --parallel clean:*",
2323
"clean:builds": "pnpm recursive exec -- rm -rf ./{dist,tsconfig.tsbuildinfo,stories.js}",
2424
"clean:ts": "pnpm recursive exec -- rm -rf ./{dist/**/*.d.ts.,tsconfig.tsbuildinfo}",
2525
"clean:cache": "pnpm recursive exec -- rm -rf ./.turbo; rm -rf .turbo/cache",
@@ -62,7 +62,7 @@
6262
"@types/react-dom": "18.2.8",
6363
"chromatic": "^11.0.0",
6464
"dotenv": "^10.0.0",
65-
"gh-pages": "^3.1.0",
65+
"lodash": "^4.17.21",
6666
"npm-package-json-lint": "8.0.0",
6767
"npm-run-all": "^4.1.5",
6868
"prettier": "2.8.8",

0 commit comments

Comments
 (0)