What do I wrap in `act` for state changes that are triggered by time and using modern fake timers

I have small hook that I wrote to avoid re-rendering when the component is unmounted.

  it("should work and not rerender and unmount later", () => {
    jest.useFakeTimers('modern');

    function MyComponent() {
      const [foo, setFoo] = useStateIfMounted("bar");

      useEffect(() => {
        (async () => {
          await delay(5000);
          setFoo("brin");
        })();
      }, [])
      useEffect(() => {
        (async () => {
          await delay(10000);
          setFoo("BAZ");
        })();
      }, [])

      return ({foo});
    }

    const { getByTestId, queryByTestId, unmount } = render()
    expect(getByTestId("test").textContent).toEqual("bar");
    act(() => jest.advanceTimersByTime(4999));
    expect(getByTestId("test").textContent).toEqual("bar");
    // the following triggers a state change
    // and I get   Warning: An update to MyComponent inside a test was not wrapped in act(...).
    act(()=>jest.advanceTimersByTime(1));
    // expect(getByTestId("test").textContent).toEqual("brin");
    // unmount();
    // act(()=>jest.advanceTimersByTime(5000));
    // expect(queryByTestId("test")).toBeFalsy()
  })

I get

at the point where I would expect it to have a state change but I already wrapped it in act

    act(()=>jest.advanceTimersByTime(1));

What do I wrap in `act` for state changes that are triggered by time and using modern fake timers

it("should work and not rerender and unmount later", async () => { jest.useFakeTimers('modern'); const renderCallback = jest.fn(); function MyComponent() { const [foo, setFoo] = useStateIfMounted("bar"); useEffect(() => { (async () => { await delay(5000); setFoo("brin"); })(); }, []) useEffect(() => { (async () => { await delay(10000); setFoo("BAZ"); })(); }, []) renderCallback(); return ({foo}); } const { getByTestId, queryByTestId, unmount } = render() expect(getByTestId("test").textContent).toEqual("bar"); expect(renderCallback).toBeCalledTimes(1) await act(async () => jest.advanceTimersByTime(4999)); expect(getByTestId("test").textContent).toEqual("bar"); expect(renderCallback).toBeCalledTimes(1) await act(async () => jest.advanceTimersByTime(3)); expect(getByTestId("test").textContent).toEqual("brin"); expect(renderCallback).toBeCalledTimes(2) unmount(); await act(async () => jest.advanceTimersByTime(5000)); expect(queryByTestId("test")).toBeFalsy() expect(renderCallback).toBeCalledTimes(2) })

What do I wrap in `act` for state changes that are triggered by time and using modern fake timers

What do I wrap in `act` for state changes that are triggered by time and using modern fake timers

0 Comment

0 Comment

About the Author

Question Info

Related Question

double area = ((IShape)circle).Area();是什么意思

cache issues O_SYNC for my device driver shared memory

使用PN5180读取mifare class 1k 验证失败：Authentication Failed

PHP for循环与foreach textarea

VMware虚拟机卡顿

<p data-section="0"><span data-section="0" data-sentence="0">如何修复标题栏行为为透明时使用'-transparentcolor'在tkinter?</span></p>

发送消息到whatsapp群

contourarea面积计算问题

#include <math.h> ... What,s your age?

vmware驱动程序不匹配