在 useEffect 中更新后反应测试状态值答案

【问题标题】：React test state value after update in useEffect在 useEffect 中更新后反应测试状态值
【发布时间】：2023-02-16 23:14:43
【问题描述】：

我需要测试 useEffect 后的状态变化

FooView.jsx ：

const [total, setTotal] = useState(0);

useEffect(() => {
    calculatedTotal = calculateTotal(page.paymentSchedule);
    setTotal(calculatedTotal);
}, [
    page.paymentSchedule,
]);

FooView-test.jsx ：

describe('...', () => {
    const paymentSchedule = [
        {
          count: 2,
          amount: 100,
        },
        {
          count: 3,
          amount: 200,
        }
    ];

    it('should update total when the payment schedule changes', () => {
        const container = mount(<FooView />);
        container.find('FooView').prop('paymentSchedule')(paymentSchedule);
        // what to do next
    });
}

我使用 Jest 和酶。如何测试结果状态值？

【问题讨论】：

标签： reactjs jestjs enzyme chai react-state

【解决方案1】：

您需要像这样设置另一个 UseEffect：

useEffect(() => {
    console.log(total)
}, [total]);

像那样，通过setTotal对total所做的每一次更改都将在您的控制台中返回

【讨论】：