How do you stop tests from randomly failing when a component measures the DOM?

programming web dev
1

Yo Kirupa folks, I’m trying to make our React component tests less flaky and I think I’m shooting myself in the foot with DOM measurement + state updates (it fails like 1/20 runs, usually in CI).

import { useLayoutEffect, useRef, useState } from "react";

export function ClampTitle({ text }: { text: string }) {
  const ref = useRef<HTMLDivElement>(null);
  const [clamped, setClamped] = useState(false);

  useLayoutEffect(() => {
    const el = ref.current;
    if (!el) return;

    // measure -> update state -> re-render
    const next = el.scrollWidth > el.clientWidth;
    setClamped(next);
  }, [text]);

  return (
    <div
      ref={ref}
      style={{ width: 180, whiteSpace: "nowrap", overflow: "hidden" }}
      data-clamped={clamped}
    >
      {text}
    </div>
  );
}

What’s the most reliable way to test this kind of “measure then setState” UI without brittle timing hacks, and how do you keep it from turning into a CI-only flaky test?