使用 hookRender() 和 act() 对酶进行测试时，使用自定义挂钩的相同功能时出现问题

Question

所以我有这个自定义挂钩：（它只是增加、减少和重置）

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
    };
};

我想通过两次调用 decrease 来测试它，但它不会两次产生相同的效果，如果我只放置一次 decrease() 并且预期值为 99，它就可以工作并且测试通过。但我想知道是否可以调用 decrease() 两次。我把测试留在下面。

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

您的问题是您将状态视为同步状态，但事实并非如此。

在 re-render 发生之前，状态不会更新。

当你调用 decrease() 两次时，你实际上是在说：

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

不管调用多少次，计数器只会减1

这是因为 counter 状态值在同一渲染期间不会改变。

要在设置状态时使用最新值，您需要更改设置状态以使用回调函数：

setCounter(prev => prev - factor)

这将按预期工作。

一般来说，当新状态值依赖于旧状态值时，您应该始终使用回调函数。在您的情况下，新值使用旧值，因此您应该使用回调函数。

您也应该以同样的方式更改您的 increase 函数。

使用 hookRender() 和 act() 对酶进行测试时，使用自定义挂钩的相同功能时出现问题

Problems using the same function of a custom hook while testing with enzyme using hookRender() and act()

reactjs

jestjs

enzyme

react-testing-library

react-hooks