Javascript 如何在Jest中使用react钩子模拟react组件的状态值

Im使用react钩子并使用Use State作为组件状态。在jest中测试组件时，我发现我无法访问状态值并模拟它

有很多代码在状态中寻找不同的值。由于该州不可访问，我无法覆盖全部代码覆盖范围

请帮助我为下面的代码编写一个测试用例

const MyComponent = props => {
    const [counterSecond, setCounterSecond] = React.useState(8);
    const [counterFirst, setCounterFirst] = React.useState(0);

    const handleIncrement = () => {
        setCounterSecond(counterSecond + 1);
    };
    const handleDecrement = () => {
        setCounterSecond(counterSecond - 1);
    };

    React.useEffect(() => {
        if (counterSecond === 10) {
            setCounterSecond(0);
            setCounterFirst(1);
        }
        if (counterSecond === 3) {
            setCounterSecond(1);
            setCounterFirst(0);
        }
        if (counterSecond ===9) {
            setCounterSecond(2);
            setCounterFirst(1);
        }

    }, [counterSecond]);

    return (
        <div>
            <div onClick={handleIncrement} >Increment</div>
            <div onClick={handleDecrement} >Decrement</div>
        </div>
    );
};

export default MyComponent;

const MyComponent=props=>{
常数[counterSecond，setCounterSecond]=React.useState（8）；
const[counterFirst，setCounterFirst]=React.useState（0）；
常量handleIncrement=（）=>{
设置反秒（反秒+1）；
};
const handleDecrement=（）=>{
设置反秒（反秒-1）；
};
React.useffect（（）=>{
如果（反秒===10）{
秒（0）；
第一组（1）；
}
如果（反秒===3）{
第二组（1）；
setCounterFirst（0）；
}
如果（反秒===9）{
第二组（2）；
第一组（1）；
}
}，[反秒]；
返回(
增量
减量
);
};
导出默认MyComponent；

正如您所看到的，代码具有useffect，它负责处理countersond值的更改。但是，只有当状态值匹配8、3或9时，才会覆盖内部条件

您能否指导我编写Jest测试用例，以涵盖UserEffect中的内部条件

1） 以及如何模拟任何状态值

---

2） 如何在使用钩子时检查状态值，让我们假设您的组件呈现

反第一个

和

反第二个

，否则它们的存在没有任何意义。差不多

....
    return (
        <div>
            <span test-id="counter">{`${counterFirst}:${counterSecond}`}</span>
            <div onClick={handleIncrement} id="inc">Increment</div>
            <div onClick={handleDecrement} id="dec">Decrement</div>
        </div>
    );

但是如何处理

useffect

中的代码呢？如果你有足够的酶版本，它应该只是工作。我相信。如果没有-检查您使用的版本

然后返回测试。直到您的代码样本计数器应该以稍微不典型的方式对递增和递减做出反应。对于inc:

0:8->1:2->1:0->1:1->1:2->1:0

（因为对于

0:9

和

1:3

来说，

useffect

中有适当的逻辑导致重新渲染）。因此，我们将测试：

function doInc(wrapper) {
  wrapper.find("inc").props().onClick();
} 
it('jumps from 0:8 to 1:2 on inc', () => {
  const wrapper = mount(<MyComponent />); // 0:8
  doInc(wrapper);
  expect(getCounter(wrapper)).toEqual('1:2');
});

也许制作一些助手函数是个好主意

---

但直接设置状态会更快吗？是的，是的。但这也会使测试变得不可靠。比如说，您的示例代码从未达到“0:9”。这可能是一个错误，而不是一个目标。我们希望测试能帮助我们认识到这一点。通过直接设置状态，我们将永远不会知道存在问题。

让我们假设您的组件呈现了

反第一个

和

反第二个

，否则它们的存在就没有任何意义。差不多

....
    return (
        <div>
            <span test-id="counter">{`${counterFirst}:${counterSecond}`}</span>
            <div onClick={handleIncrement} id="inc">Increment</div>
            <div onClick={handleDecrement} id="dec">Decrement</div>
        </div>
    );

但是如何处理

useffect

中的代码呢？如果你有足够的酶版本，它应该只是工作。我相信。如果没有-检查您使用的版本

然后返回测试。直到您的代码样本计数器应该以稍微不典型的方式对递增和递减做出反应。对于inc:

0:8->1:2->1:0->1:1->1:2->1:0

（因为对于

0:9

和

1:3

来说，

useffect

中有适当的逻辑导致重新渲染）。因此，我们将测试：

function doInc(wrapper) {
  wrapper.find("inc").props().onClick();
} 
it('jumps from 0:8 to 1:2 on inc', () => {
  const wrapper = mount(<MyComponent />); // 0:8
  doInc(wrapper);
  expect(getCounter(wrapper)).toEqual('1:2');
});

也许制作一些助手函数是个好主意

---

但直接设置状态会更快吗？是的，是的。但这也会使测试变得不可靠。比如说，您的示例代码从未达到“0:9”。这可能是一个错误，而不是一个目标。我们希望测试能帮助我们认识到这一点。通过直接设置状态，我们永远不会知道有问题。

我想知道，如果组件在

渲染中未使用状态，您是否真的需要状态。

@skyboyer我想知道如何实现它。。这样我就可以申请更大的申请。请建议我想知道如果组件在

渲染中没有使用它，它是否真的需要状态。我想知道怎么做。。这样我就可以申请更大的申请。请建议