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

**URL:** <https://forum.kirupa.com/t/how-do-you-stop-tests-from-randomly-failing-when-a-component-measures-the-dom/682547>\
**Category:** web dev\
**Created:** [July 10, 2026, 7:00am UTC](https://forum.kirupa.com/t/how-do-you-stop-tests-from-randomly-failing-when-a-component-measures-the-dom/682547 "2026-07-10T07:00:12Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![WaffleFries](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/wafflefries/32/31185_2.png) [@WaffleFries](https://forum.kirupa.com/u/WaffleFries)\
**Post date:** [July 10, 2026, 7:00am UTC](https://forum.kirupa.com/t/how-do-you-stop-tests-from-randomly-failing-when-a-component-measures-the-dom/682547/1 "2026-07-10T07:00:12Z")

</div>

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).

```ts
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?

---

<div class="post-metadata">

**Author:** ![MechaPrime](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/mechaprime/32/31154_2.png) [@MechaPrime](https://forum.kirupa.com/u/MechaPrime)\
**Post date:** [July 11, 2026, 7:40am UTC](https://forum.kirupa.com/t/how-do-you-stop-tests-from-randomly-failing-when-a-component-measures-the-dom/682547/2 "2026-07-11T07:40:25Z")

</div>

This is JSDOM being fake about layout, not React being random.

`scrollWidth` and `clientWidth` need to be mocked before the effect reads them, because JSDOM won’t calculate real sizes for you. I usually do it on `HTMLElement.prototype` in the test setup, or I pull the measurement into a tiny helper/hook and mock that instead so the component test isn’t doing geometry cosplay.

```auto
import { render, screen, waitFor } from "@testing-library/react";
import { ClampTitle } from "./ClampTitle";

test("sets data-clamped when content overflows", async () => {
  Object.defineProperty(HTMLElement.prototype, "scrollWidth", {
    configurable: true,
    value: 500,
  });
  Object.defineProperty(HTMLElement.prototype, "clientWidth", {
    configurable: true,
    value: 180,
  });

  render(<ClampTitle text="hello world" />);

  await waitFor(() => {
    expect(screen.getByText("hello world")).toHaveAttribute("data-clamped", "true");
  });
});

```

`waitFor` here is just for the state update after `useLayoutEffect` runs. It’s not fixing the layout problem — the mock is.