在使用 hookRender() 和 act() 使用酶进行测试时，使用自定义钩子的相同 function 时出现问题

Question

So i have this custom hook: (it just increase, decrease and reset)

import { useState } from 'react';
export const useCounter = (initialState = 1) => {

    const [counter, setCounter] = useState(initialState);
    const increase = (factor = 1) =>{
        setCounter(counter + factor);
    }
    const decrease = (factor = 1) =>{
        setCounter(counter - factor);
    }
    const reset = () =>{
        setCounter(initialState)
    }
    return {
        counter,
        increment,
        decrease,
        reset
    };
};

I would like to test it by calling decrease two time, but it does not do the same effect twice, if I just put decrease() once and value expected to be 99,it works and the test pass. But i was wondering if it is possible to call decrease() twice. I leave the test below.

import "@testing-library/jest-dom";
import { renderHook, act } from "@testing-library/react-hooks";
import { useCounter } from "../../hooks/useCounter";

describe("Test useCounter", () => {
    test("should decrease two times", () => {
        const { result, rerender } = renderHook(() => useCounter(100));
        const { decrease } = result.current;
        act(() => {
            decrease();
            decrease();
        });

        const { counter } = result.current;
        expect(counter).toBe(98);
    });
});

Answer 1

Your issue is that you are treating state like it is synchronous, but it is not.

State does not update until a re-render happens.

When you call decrease() twice, you are essentially saying:

setCounter(100 - 1)
setCounter(100 - 1)

No matter how many times you call it, the counter will only decrement by 1.

This is because the counter state value doesn't change during the same render.

To use the most up to date value when setting state, you need to change your set state to use a callback function:

setCounter(prev => prev - factor)

This will work as expected.

In general, you should always use a callback function when the new state value depends on the old state value. In your case, the new value uses the old value, so you should be using a callback function.

You should also change your increase function in the same way.