chore: Fixes some integ tests for react 18 #3947
Conversation
pan-kot
force-pushed
the
fix-react18-tests
branch
from
7238690 to
6d0e92d
Compare
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #3947 +/- ##
==========================================
- Coverage 97.17% 97.16% -0.01%
==========================================
Files 854 854
Lines 24983 24978 -5
Branches 8801 8800 -1
==========================================
- Hits 24276 24271 -5
+ Misses 701 659 -42
- Partials 6 48 +42 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
pan-kot
force-pushed
the
fix-react18-tests
branch
from
40cf2ed to
92ffa9f
Compare
pan-kot
force-pushed
the
fix-react18-tests
branch
from
92ffa9f to
2727ad3
Compare
pan-kot
force-pushed
the
fix-react18-tests
branch
from
2727ad3 to
54d9251
Compare
| const [readyItems, setReadyItems] = useState(memoItems); | ||
| const [delayedItems, setReadyItems] = useState(memoItems); | ||
| const readyItems = settings.manualServerMock ? memoItems : delayedItems; | ||
| useEffect(() => { |
There was a problem hiding this comment.
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.
pan-kot
force-pushed
the
fix-react18-tests
branch
from
54d9251 to
d155d92
Compare
| ); | ||
|
|
||
| (process.env.REACT_VERSION !== '18' ? test : test.skip)( | ||
| test( |
There was a problem hiding this comment.
This test is now working thanks to the changes to the test page.
| return marks.filter(m => m.detail?.source === 'awsui'); | ||
| let awsuiMarks: PerformanceMark[] = []; | ||
| await page.waitForAssertion(async () => { | ||
| await new Promise(r => setTimeout(r, 200)); |
There was a problem hiding this comment.
This timeout is likely causing issues. Increasing it three-fold reduces flakiness, but the waitForAssertion seems to do a better job.
| ); | ||
|
|
||
| (process.env.REACT_VERSION !== '18' ? test : test.skip)( | ||
| test( |
There was a problem hiding this comment.
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.
| 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]); |
There was a problem hiding this comment.
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.
gethinwebster
requested review from
a team
and removed request for
a team and
gethinwebster
pan-kot
requested review from
a team and
jperals
and removed request for
a team and
patrixd
1 participant
Description
The PR fixes some of the tests that were muted for React 18.
How has this been tested?
Review checklist
The following items are to be evaluated by the author(s) and the reviewer(s).
Correctness
CONTRIBUTING.md.CONTRIBUTING.md.Security
checkSafeUrlfunction.Testing
By submitting this pull request, I confirm that you can use, modify, copy, and redistribute this contribution, under the terms of your choice.