chore: Fixes some integ tests for react 18 #3947

pan-kot · 2025-10-20T09:02:01Z

Description

The PR fixes some of the tests that were muted for React 18.

How has this been tested?

The flaky tests have been run over 100 times in the dry-run to ensure stability.

Review checklist

The following items are to be evaluated by the author(s) and the reviewer(s).

Correctness

Changes include appropriate documentation updates.
Changes are backward-compatible if not indicated, see CONTRIBUTING.md.
Changes do not include unsupported browser features, see CONTRIBUTING.md.
Changes were manually tested for accessibility, see accessibility guidelines.

Security

If the code handles URLs: all URLs are validated through the checkSafeUrl function.

Testing

Changes are covered with new/existing unit tests?
Changes are covered with new/existing integration tests?

By submitting this pull request, I confirm that you can use, modify, copy, and redistribute this contribution, under the terms of your choice.

codecov · 2025-10-20T09:25:00Z

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 97.20%. Comparing base (041d9eb) to head (d7b7a05).
⚠️ Report is 48 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #3947      +/-   ##
==========================================
+ Coverage   97.17%   97.20%   +0.03%     
==========================================
  Files         854      858       +4     
  Lines       24983    25359     +376     
  Branches     8801     9014     +213     
==========================================
+ Hits        24276    24650     +374     
+ Misses        701      660      -41     
- Partials        6       49      +43

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

pan-kot · 2025-10-20T12:00:19Z

pages/table/expandable-rows-test.page.tsx

-  const [readyItems, setReadyItems] = useState(memoItems);
+  const [delayedItems, setReadyItems] = useState(memoItems);
+  const readyItems = settings.manualServerMock ? memoItems : delayedItems;
  useEffect(() => {


This useEffect is firing an extra time during integ tests when run with React 18 + strict-mode, thus enforcing the loading state after the items are already resolved. The updated code avoids that effect as unnecessary as its only purpose is to imitate a server-side delay for manual tests.

Would it help to merge variables, e.g, loading might not be necessary if it can be inferred from the presence of the ready items, and error and items could be merged in one single object?

I din't quite understand that, could you please share a code example?

For example:

const [response, setResponse] = useState({}); if (!settings.manualServerMock) { setResponse({ isLoading: true, isError: false }); return getServerResponse(() => { setResponse({ isLoading: false, isError: settings.emulateServerError, items: memoItems }); }); }

in case setting three state variables independently was causing some problem.

pan-kot · 2025-10-20T12:01:48Z

src/table/__integ__/expandable-rows.test.ts

  );

-  (process.env.REACT_VERSION !== '18' ? test : test.skip)(
+  test(


This test is now working thanks to the changes to the test page.

pan-kot · 2025-10-20T12:02:54Z

src/table/__integ__/performance-marks.test.ts

-      return marks.filter(m => m.detail?.source === 'awsui');
+      let awsuiMarks: PerformanceMark[] = [];
+      await page.waitForAssertion(async () => {
+        await new Promise(r => setTimeout(r, 200));


This timeout is likely causing issues. Increasing it three-fold reduces flakiness, but the waitForAssertion seems to do a better job.

pan-kot · 2025-10-20T12:04:11Z

src/table/__integ__/resizable-columns.test.ts

 );

-(process.env.REACT_VERSION !== '18' ? test : test.skip)(
+test(


This test was flaky, but I wasn't able to reproduce the failures when running it 100 times in a loop. I tried running it with visualRefresh=true and visualRefresh=false.

pan-kot · 2025-10-20T12:05:43Z

src/table/__integ__/table.test.ts

    expect(role).toEqual('region');
    expect(ariaLabelledby).not.toBeFalsy();
-    await expect(page.getElementsText(`#${ariaLabelledby}`)).resolves.toEqual([tableHeading]);
+    await expect(page.getElementsText(`#${CSS.escape(ariaLabelledby)}`)).resolves.toEqual([tableHeading]);


When React 18+ is used, we use the React's useId() function to generate unique IDs (used for ARIA labelled-by). However, that function produces ids with colons (":") that cause an invalid selector error unless escaped.

But if the element with the aria-labelledby attribute uses the ID without escaping, do they still match?

Yes, the matching works - only querying does not

jperals · 2025-10-28T09:52:40Z

src/table/__integ__/performance-marks.test.ts

-      return marks.filter(m => m.detail?.source === 'awsui');
+      let awsuiMarks: PerformanceMark[] = [];
+      await page.waitForAssertion(async () => {
+        await new Promise(r => setTimeout(r, 200));


Do we need the timeout at all if we wrap the assertion in waitForAssertion?

Good point - I will experiment with that

I will move the timeout to the outside of the block, as the initial delay is expected

jperals · 2025-10-28T09:54:09Z

src/table/__integ__/performance-marks.test.ts

+        await new Promise(r => setTimeout(r, 200));
+        const marks = await browser.execute(() => performance.getEntriesByType('mark') as PerformanceMark[]);
+        awsuiMarks = marks.filter(m => m.detail?.source === 'awsui');
+        if (awsuiMarks.length === 0) {


Minor: why not use expect instead?

Good point - will updated 👍

jperals · 2025-10-28T09:59:56Z

src/table/__integ__/table.test.ts

    expect(role).toEqual('region');
    expect(ariaLabelledby).not.toBeFalsy();
-    await expect(page.getElementsText(`#${ariaLabelledby}`)).resolves.toEqual([tableHeading]);
+    await expect(page.getElementsText(`#${CSS.escape(ariaLabelledby)}`)).resolves.toEqual([tableHeading]);


But if the element with the aria-labelledby attribute uses the ID without escaping, do they still match?

jperals · 2025-10-28T10:01:56Z

pages/table/expandable-rows-test.page.tsx

  // Imitate server-side delay when items update.
  const memoItems = useEqualsMemo(collectionResult.items);
-  const [readyItems, setReadyItems] = useState(memoItems);
+  const [delayedItems, setReadyItems] = useState(memoItems);


Is it intentional that the name of these two variables don't match?

No - will update 👍

jperals · 2025-10-28T10:03:06Z

pages/table/expandable-rows-test.page.tsx

-  const [readyItems, setReadyItems] = useState(memoItems);
+  const [delayedItems, setReadyItems] = useState(memoItems);
+  const readyItems = settings.manualServerMock ? memoItems : delayedItems;
  useEffect(() => {


Would it help to merge variables, e.g, loading might not be necessary if it can be inferred from the presence of the ready items, and error and items could be merged in one single object?

jperals · 2025-11-03T13:59:03Z

pages/table/expandable-rows-test.page.tsx

  const memoItems = useEqualsMemo(collectionResult.items);
-  const [readyItems, setReadyItems] = useState(memoItems);
+  const [delayedItems, setDelayedItems] = useState(memoItems);
+  const readyItems = settings.manualServerMock ? memoItems : delayedItems;


What is the difference between settings.manualServerMock and settings.useServerMock?

In the dev page, there only seems to be one related option ("Use server mock")

pan-kot changed the title ~~Fix react18 tests~~ chore: Fixes some integ tests for react 18 Oct 20, 2025

pan-kot force-pushed the fix-react18-tests branch from 7238690 to 6d0e92d Compare October 20, 2025 09:08

pan-kot deployed to dev-pages-react16 October 20, 2025 09:24 — with GitHub Actions View deployment

pan-kot deployed to dev-pages-react18 October 20, 2025 09:24 — with GitHub Actions View deployment

pan-kot deployed to dev-pages-react16 October 20, 2025 10:21 — with GitHub Actions View deployment

pan-kot deployed to dev-pages-react18 October 20, 2025 10:21 — with GitHub Actions View deployment

pan-kot force-pushed the fix-react18-tests branch from 40cf2ed to 92ffa9f Compare October 20, 2025 10:46

pan-kot deployed to dev-pages-react16 October 20, 2025 10:55 — with GitHub Actions View deployment

pan-kot deployed to dev-pages-react18 October 20, 2025 10:55 — with GitHub Actions View deployment

pan-kot force-pushed the fix-react18-tests branch from 92ffa9f to 2727ad3 Compare October 20, 2025 11:33

pan-kot deployed to dev-pages-react16 October 20, 2025 11:43 — with GitHub Actions View deployment

pan-kot deployed to dev-pages-react18 October 20, 2025 11:43 — with GitHub Actions View deployment

pan-kot force-pushed the fix-react18-tests branch from 2727ad3 to 54d9251 Compare October 20, 2025 11:57

pan-kot commented Oct 20, 2025

View reviewed changes

pan-kot force-pushed the fix-react18-tests branch from 54d9251 to d155d92 Compare October 20, 2025 12:00

pan-kot commented Oct 20, 2025

View reviewed changes

pan-kot deployed to dev-pages-react16 October 20, 2025 12:10 — with GitHub Actions View deployment

pan-kot deployed to dev-pages-react18 October 20, 2025 12:10 — with GitHub Actions View deployment

pan-kot marked this pull request as ready for review October 20, 2025 12:49

pan-kot requested a review from a team as a code owner October 20, 2025 12:49

pan-kot requested review from gethinwebster and removed request for a team October 20, 2025 12:49

gethinwebster requested review from a team and patrixd and removed request for a team and gethinwebster October 20, 2025 12:52

pan-kot requested review from a team and jperals and removed request for a team and patrixd October 23, 2025 15:32

jperals reviewed Oct 28, 2025

View reviewed changes

chore: (WIP) Fixes table integ tests for React 18

d7b7a05

pan-kot force-pushed the fix-react18-tests branch from d155d92 to d7b7a05 Compare November 3, 2025 13:43

pan-kot requested a review from jperals November 3, 2025 13:43

pan-kot deployed to dev-pages-react18 November 3, 2025 13:52 — with GitHub Actions View deployment

pan-kot deployed to dev-pages-react16 November 3, 2025 13:52 — with GitHub Actions View deployment

jperals reviewed Nov 3, 2025

View reviewed changes

chore: Fixes some integ tests for react 18 #3947

Are you sure you want to change the base?

chore: Fixes some integ tests for react 18 #3947

Uh oh!

Conversation

pan-kot commented Oct 20, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

How has this been tested?

Correctness

Security

Testing

Uh oh!

codecov bot commented Oct 20, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

pan-kot Oct 20, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

pan-kot commented Oct 20, 2025 •

edited

Loading

codecov bot commented Oct 20, 2025 •

edited

Loading

pan-kot Oct 20, 2025 •

edited

Loading