chore(frontend): Modernize test patterns — remove Enzyme, querySelector, and waitFor anti-patterns

[manaswinidas]

Summary

The frontend test suite has accumulated legacy patterns that increase maintenance burden, reduce test reliability, and make it harder to write good new tests. This issue tracks incremental cleanup across three categories.

Categories

1. Enzyme wrappers (23 files)

These files still use shallow() or mount() from Enzyme. All new tests use Testing Library (@testing-library/react), and Enzyme is not compatible with React 19 without community adapters.

Files

• src/components/Trigger.test.tsx
• src/pages/AllRunsList.test.tsx
• src/mlmd/LineageActionBar.test.tsx
• src/pages/PipelineVersionList.test.tsx
• src/pages/PipelineDetails.test.tsx
• src/components/CustomTable.test.tsx
• src/pages/NewExperiment.test.tsx
• src/components/SidePanel.interaction.test.tsx
• src/pages/ExperimentList.test.tsx
• src/pages/NewPipelineVersion.test.tsx
• src/pages/RecurringRunList.test.tsx
• src/pages/NewRun.test.tsx
• src/pages/ArchivedExperiments.test.tsx
• src/pages/ArchivedRuns.test.tsx
• src/pages/PipelineList.test.tsx
• src/pages/ResourceSelector.test.tsx
• src/pages/RunList.test.tsx
• src/pages/AllRecurringRunsList.test.tsx
• src/components/ExperimentList.test.tsx
• src/pages/CompareV1.test.tsx
• src/pages/RecurringRunDetails.test.tsx
• src/pages/RunDetails.test.tsx
• src/components/UploadPipelineDialog.test.tsx

2. querySelector usage in tests (25 files)

Tests that use container.querySelector or document.querySelector instead of Testing Library queries (getByRole, getByText, getByTestId, etc.). These bypass accessibility semantics and are more brittle.

Files

• src/mlmd/EdgeCanvas.test.tsx
• src/components/CustomTable.test.tsx
• src/pages/ExperimentDetails.test.tsx
• src/components/CustomTableNameColumn.test.tsx
• src/mlmd/ControlledEdgeCanvas.test.tsx
• src/mlmd/LineageCardColumn.test.tsx
• src/pages/CompareV2.test.tsx
• src/mlmd/LineageCard.test.tsx
• src/components/Editor.test.tsx
• src/components/viewers/ConfusionMatrix.test.tsx
• src/components/graph/SubDagNode.test.tsx
• src/components/viewers/HTMLViewer.test.tsx
• src/components/SideNav.test.tsx
• src/components/NewRunParameters.test.tsx
• src/pages/RecurringRunDetailsRouter.test.tsx
• src/components/viewers/ROCCurve.test.tsx
• src/mlmd/EdgeLine.test.tsx
• src/components/Graph.test.tsx
• src/pages/CompareV1.test.tsx
• src/mlmd/LineageCardRow.test.tsx
• src/components/PlotCard.test.tsx
• src/components/graph/ArtifactNode.test.tsx
• src/components/NewRunParametersV2.test.tsx
• src/components/graph/ExecutionNode.test.tsx
• src/pages/NewRun.test.tsx

3. waitFor anti-patterns

Some tests wrap non-assertion logic or multiple assertions inside a single waitFor, which can mask timing issues. The recommended pattern is one assertion per waitFor or using findBy* queries. This is a lower-priority cleanup since the tests still pass, but it improves reliability and readability.

Approach

• Chip away incrementally — one file or one category at a time per PR.
• Each PR should migrate a file to Testing Library patterns and verify tests still pass.
• Files that overlap multiple categories (e.g., NewRun.test.tsx has Enzyme + querySelector) can be cleaned up in a single PR.
• No need to touch files that are slated for deletion (e.g., if the component itself is being removed).

Acceptance criteria

• All Enzyme imports removed; enzyme and its adapters can be dropped from devDependencies
• No querySelector usage in test files where a Testing Library query is viable
• waitFor blocks contain only assertions, not side-effect logic

/area frontend
/kind cleanup

[google-oss-prow]

@manaswinidas: The label(s) kind/cleanup cannot be applied, because the repository doesn't have them.

Details

In response to this:

Summary

The frontend test suite has accumulated legacy patterns that increase maintenance burden, reduce test reliability, and make it harder to write good new tests. This issue tracks incremental cleanup across three categories.

Categories

1. Enzyme wrappers (23 files)

These files still use shallow() or mount() from Enzyme. All new tests use Testing Library (@testing-library/react), and Enzyme is not compatible with React 19 without community adapters.

Files

• src/components/Trigger.test.tsx
• src/pages/AllRunsList.test.tsx
• src/mlmd/LineageActionBar.test.tsx
• src/pages/PipelineVersionList.test.tsx
• src/pages/PipelineDetails.test.tsx
• src/components/CustomTable.test.tsx
• src/pages/NewExperiment.test.tsx
• src/components/SidePanel.interaction.test.tsx
• src/pages/ExperimentList.test.tsx
• src/pages/NewPipelineVersion.test.tsx
• src/pages/RecurringRunList.test.tsx
• src/pages/NewRun.test.tsx
• src/pages/ArchivedExperiments.test.tsx
• src/pages/ArchivedRuns.test.tsx
• src/pages/PipelineList.test.tsx
• src/pages/ResourceSelector.test.tsx
• src/pages/RunList.test.tsx
• src/pages/AllRecurringRunsList.test.tsx
• src/components/ExperimentList.test.tsx
• src/pages/CompareV1.test.tsx
• src/pages/RecurringRunDetails.test.tsx
• src/pages/RunDetails.test.tsx
• src/components/UploadPipelineDialog.test.tsx

2. querySelector usage in tests (25 files)

Tests that use container.querySelector or document.querySelector instead of Testing Library queries (getByRole, getByText, getByTestId, etc.). These bypass accessibility semantics and are more brittle.

Files

• src/mlmd/EdgeCanvas.test.tsx
• src/components/CustomTable.test.tsx
• src/pages/ExperimentDetails.test.tsx
• src/components/CustomTableNameColumn.test.tsx
• src/mlmd/ControlledEdgeCanvas.test.tsx
• src/mlmd/LineageCardColumn.test.tsx
• src/pages/CompareV2.test.tsx
• src/mlmd/LineageCard.test.tsx
• src/components/Editor.test.tsx
• src/components/viewers/ConfusionMatrix.test.tsx
• src/components/graph/SubDagNode.test.tsx
• src/components/viewers/HTMLViewer.test.tsx
• src/components/SideNav.test.tsx
• src/components/NewRunParameters.test.tsx
• src/pages/RecurringRunDetailsRouter.test.tsx
• src/components/viewers/ROCCurve.test.tsx
• src/mlmd/EdgeLine.test.tsx
• src/components/Graph.test.tsx
• src/pages/CompareV1.test.tsx
• src/mlmd/LineageCardRow.test.tsx
• src/components/PlotCard.test.tsx
• src/components/graph/ArtifactNode.test.tsx
• src/components/NewRunParametersV2.test.tsx
• src/components/graph/ExecutionNode.test.tsx
• src/pages/NewRun.test.tsx

3. waitFor anti-patterns

Some tests wrap non-assertion logic or multiple assertions inside a single waitFor, which can mask timing issues. The recommended pattern is one assertion per waitFor or using findBy* queries. This is a lower-priority cleanup since the tests still pass, but it improves reliability and readability.

Approach

• Chip away incrementally — one file or one category at a time per PR.
• Each PR should migrate a file to Testing Library patterns and verify tests still pass.
• Files that overlap multiple categories (e.g., NewRun.test.tsx has Enzyme + querySelector) can be cleaned up in a single PR.
• No need to touch files that are slated for deletion (e.g., if the component itself is being removed).

Acceptance criteria

• All Enzyme imports removed; enzyme and its adapters can be dropped from devDependencies
• No querySelector usage in test files where a Testing Library query is viable
• waitFor blocks contain only assertions, not side-effect logic

/area frontend
/kind cleanup

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the kubernetes/test-infra repository.

[Priyanshu-u07]

Hi @manaswinidas, I’d like to work on this issue.

[manaswinidas]

/assign @Priyanshu-u07

[m13v]

migrating away from querySelector to Testing Library queries was one of the best testing investments we made. the biggest win is getByRole because it forces you to think about accessibility semantics, which both makes tests more resilient and surfaces accessibility issues for free. one pattern that helped during the migration: instead of rewriting entire test files at once, we added a lint rule that warned on new querySelector usage while allowing existing ones, then chipped away file by file. for the waitFor anti-patterns, the findBy queries are almost always what you want instead, they combine the waiting and querying into one step and the error messages are much better when they fail. the Enzyme migration is the heaviest lift since shallow rendering and mount have fundamentally different philosophies than Testing Library's render. we found that most shallow-rendered tests were testing implementation details anyway and could be replaced with fewer, better tests that render the full component.

[m13v]

for reference, our test agent uses accessibility-semantic selectors (role-based, label-based) rather than querySelector patterns. the selector strategy is in our agent implementation: https://github.com/assrt-ai/assrt-freestyle/blob/main/src/core/agent.ts