test: update TreeView tests to address flakiness#7818
test: update TreeView tests to address flakiness#7818
Conversation
|
There was a problem hiding this comment.
Pull request overview
Updates TreeView browser tests to reduce CI flakiness and eliminate act() warnings by modernizing Testing Library usage and improving async coordination.
Changes:
- Refactors tests to use
render(...)directly andscreen.*queries consistently. - Wraps more user interactions and focus/keyboard transitions in
act()and replaces timer-driven assertions withwaitFor(...)where appropriate. - Updates
package-lock.jsonto reflect the current workspace package versions for@primer/reactand@primer/styled-react.
Show a summary per file
| File | Description |
|---|---|
| packages/react/src/TreeView/TreeView.test.tsx | Refactors TreeView tests to reduce flakiness (screen-based queries, better act() usage, and improved async handling). |
| package-lock.json | Updates lockfile entries to match the current workspace package versions. |
Copilot's findings
Comments suppressed due to low confidence (2)
packages/react/src/TreeView/TreeView.test.tsx:883
- In this Home-key test,
parent3is queried with name "Parent 2" and the inline comments say ArrowDown is pressed twice to reach “parent 3”, but the test only presses ArrowDown once. This is confusing and makes the intent unclear—either query/rename to Parent 2 and update comments, or actually move focus to Parent 3 (and press ArrowDown twice) to match the description.
const parent1 = screen.getByRole('treeitem', {name: 'Parent 1'})
const parent3 = screen.getByRole('treeitem', {name: 'Parent 2'})
act(() => {
// Focus first item
parent1.focus()
})
// Press ↓ 2 times to move focus to parent 3
fireEvent.keyDown(document.activeElement || document.body, {key: 'ArrowDown'})
// Parent 3 should be focused
expect(parent3).toHaveFocus()
packages/react/src/TreeView/TreeView.test.tsx:1577
- The error dialog content string "Opps" looks like a typo; consider correcting it to "Oops" so the test reads clearly.
Parent
<TreeView.SubTree>
<TreeView.ErrorDialog>Opps</TreeView.ErrorDialog>
<TreeView.Item id="child">Child</TreeView.Item>
- Files reviewed: 1/2 changed files
- Comments generated: 1
| await waitFor(() => { | ||
| expect(treeitem).toHaveAttribute('aria-expanded', 'true') | ||
| expect(screen.getByLabelText('No items found')).toBeInTheDocument() | ||
| }) |
There was a problem hiding this comment.
Updated in 765fece: this test now uses fake timers and advances time deterministically by 1000ms before assertions, removing the waitFor race against a real timeout.
Agent-Logs-Url: https://github.com/primer/react/sessions/596ca6da-3173-4f36-bb23-a1a7a57a204c Co-authored-by: joshblack <3901764+joshblack@users.noreply.github.com>
|
Just as a heads up, I was blocked by some firewall rules while working on your feedback. Expand below for details. Warning Firewall rules blocked me from connecting to one or more addresses (expand for details)I tried to connect to the following addresses, but was blocked by firewall rules:
If you need me to access, download, or install something from one of these locations, you can either:
|
|
🤖 Lint issues have been automatically fixed and committed to this PR. |
Update our TreeView tests to avoid flakiness issues we're seeing in CI
Changelog
New
Changed
renderWithThemeand userenderdirectlyscreen.*instead of helpers returned byrenderact()act()warningsRemoved
Rollout strategy
This is a change to our internal test setup