chore: ignore flaky tests

[benlife5]

No description provided.

[coderabbitai]

Walkthrough

Two test files in the visual-editor package were updated to adjust visual regression testing behavior. The AboutSection test now conditionally ignores a specific pixel region during screenshot comparison when the test name matches "version 50 props with details column" on tablet viewport. The Breadcrumbs test adds a custom threshold value and an ignore list for exact pixel differences to its screenshot assertion. These changes affect only test-time visual comparison logic without modifying rendering or component functionality.

Possibly related PRs

• chore: increase threshold for recently flaky tests #911: Modifies visual regression tests by adjusting toMatchScreenshot options (thresholds and ignoreExact regions) to relax pixel-level comparison constraints.

Suggested reviewers

• colton-demetriou
• mkilpatrick
• asanehisa

🚥 Pre-merge checks | ✅ 1 | ❌ 1

❌ Failed checks (1 inconclusive)

Check name	Status	Explanation	Resolution
Description check	❓ Inconclusive	No pull request description was provided by the author, which is insufficient to evaluate relatedness to the changeset.	Add a description explaining why these tests are flaky and what specific regions are being ignored to help reviewers understand the context.

✅ Passed checks (1 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title 'chore: ignore flaky tests' is directly related to the changeset, which updates test files to ignore specific regions during screenshot comparisons to address flaky test issues.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

• 📝 Generate docstrings

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 0

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

packages/visual-editor/src/components/pageSections/Breadcrumbs.test.tsx (1)

174-184: Magic number 333 and inconsistent threshold application need clarification.

The ignoreExact: [333] is unexplained—it's unclear what pixel index or region this refers to or why it needs to be ignored. Additionally, customThreshold: 25 lacks context on the units/scale and why this specific value was chosen.

Also, the post-interaction assertion at line 184 still uses plain toMatchScreenshot(). If flakiness affects the first screenshot comparison, consider whether the same tolerances should apply after interactions.

Suggest adding a brief comment explaining:

1. What 333 represents and why it causes flakiness
2. What threshold units are and why 25 is appropriate
3. Whether line 184 intentionally omits these tolerances

Suggested documentation

       await expect(
         `BreadcrumbsSection/[${viewportName}] ${name}`
-      ).toMatchScreenshot({ customThreshold: 25, ignoreExact: [333] });
+      // Increased threshold and pixel ignore list to handle font rendering flakiness
+      // ignoreExact: [333] - pixel index affected by anti-aliasing variations
+      ).toMatchScreenshot({ customThreshold: 25, ignoreExact: [333] });

🧹 Nitpick comments (1)

packages/visual-editor/src/components/pageSections/AboutSection/AboutSection.test.tsx (1)

594-598: Add a comment explaining why pixel 5400 is ignored.

The magic number 5400 lacks context. Future maintainers won't know what element or region this pixel corresponds to, or what causes the flakiness (e.g., timing-dependent animation, font rendering variance, dynamic content). Consider adding a brief comment explaining the root cause.

       await expect(`AboutSection/[${viewportName}] ${name}`).toMatchScreenshot({
         useFullPage: true,
+        // Ignore pixel 5400 on tablet for "version 50 props with details column" 
+        // due to [brief explanation of flakiness cause, e.g., "hours status rendering timing"]
         ignoreExact:
           name === "version 50 props with details column" &&
           viewportName === "tablet"
             ? [5400]
             : undefined,
       });

📜 Review details

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 3c234b1 and 1b54442.

📒 Files selected for processing (2)

• packages/visual-editor/src/components/pageSections/AboutSection/AboutSection.test.tsx
• packages/visual-editor/src/components/pageSections/Breadcrumbs.test.tsx

🧰 Additional context used

🧠 Learnings (1)

📚 Learning: 2026-01-12T21:31:40.196Z

Learnt from: benlife5
Repo: yext/visual-editor PR: 980
File: packages/visual-editor/src/components/pageSections/AboutSection/AboutSectionDetailsColumn.tsx:310-316
Timestamp: 2026-01-12T21:31:40.196Z
Learning: Do not use React hooks inside arbitrary callback functions. Hooks must be called only at the top level of React function components or custom hooks. If a callback (e.g., getItemSummary in a framework context like Puck) is not a component or a custom hook, refactor to move hook usage to a component/hook, or pass necessary data via props/state. This guideline applies to all TSX files in the repo.

Applied to files:

• packages/visual-editor/src/components/pageSections/Breadcrumbs.test.tsx
• packages/visual-editor/src/components/pageSections/AboutSection/AboutSection.test.tsx

_{✏️ Tip: You can disable this entire section by setting review_details to false in your review settings.}