useGlobals

Cheese-test.jsx

describe("Cheese", () => {
  it("renders milk when aging is not yet complete", () => {
    const wrapped = mount(<Cheese />);

    expect(wrapped.text()).toBe("🥛");
  });

  it("renders cheese when aging has completed", () => {
    const wrapped = mount(<Cheese />);
    const { clock } = useGlobals();

    act(() => clock.tick(1000));
    wrapped.rerender();

    expect(wrapped.text()).toBe("🧀");
  });
});

Cheese.jsx

const Cheese = () => {
  const [aged, setAged] = useState(false);
  const { clearTimeout, setTimeout } = useGlobals();

  useEffect(() => {
    const handle = setTimeout(setAged, 1000, true);
    return () => clearTimeout(handle);
  }, [aged, clearTimeout, setAged, setTimeout]);

  return <>{aged ? "🧀" : "🥛"}</>;
};

export default Cheese;

useGlobals.js

import { createClock } from "lolex";

const globals = (() => {
  if (process.env.NODE_ENV !== "test") {
    return { clearTimeout, setTimeout };
  }

  const clock = createClock();

  return {
    ...clock,
    clock
  };
})();

export const useGlobals = () => globals;