JSFiddle - React, Tailwind, and code Playground

HTML

<canvas></canvas>
<div class="reflow-tester">Tester</div>

CSS

.reflow-tester {
  opacity: 0;
}
.hidden {
  display: none;
}

JavaScript

function testReflow(func) {
  return new Promise( (res, rej) => {
    const elem = document.querySelector(".reflow-tester");
    // set "intermediary" values
    elem.style.opacity = 1;
    elem.style.transition = "none";
    try { func(elem); } catch(err) { rej(err) }
    elem.style.opacity = 0;
    elem.style.transition = "opacity 0.01s";

    // if the tested func does trigger a reflow
    // the transition will start from 1 to 0
    // otherwise it won't happen (from 0 to 0)    
    elem.addEventListener("transitionstart", (evt) => {
      res(true); // let the caller know the result
    }, { once: true });
    // if the transition didn't start in 100ms, it didn't cause a reflow
    setTimeout(() => res(false), 100);

  });
}
// Start tests
(async () => {
	const canvas = document.querySelector("canvas")
  const ctx = canvas.getContext("2d");
	await new Promise(res=>setTimeout(res, 1000));
	const recalc = await testReflow(() => {
	  ctx.fillText("Foo bar", 0, 30);
    return 
  })
  console.log("recalc:", recalc);
})().catch(console.error);