Question

基本上，我有一个React Native组件，它是我的Login组件。我想测试多个状态变化。

我的组件的第一个阶段是显示一个加载组件，然后，它会经历多个异步函数，如：

NetInfo：为了查看我是否可以使用网络登录自动登录
setState：一些状态更改，也有回调函数。
fetch：从API获取信息。

到目前为止，我同时对fetch和NetInfo进行了嘲弄。 Coverage显示某些函数的执行方式与setState中的回调类似，但是，例如，snapchots显示第一个原始状态，即加载微调器。

我理解这可能是预期的，所以我尝试在浅层包装器实例上执行forceUpdate和updae，并且快照没有变化。唯一对我有用的是设置100ms的超时，然后检查包装器。此外，我需要手动执行一些内部函数，因为不知何故，并非所有函数都执行，比如setState中的回调。这很奇怪，因为覆盖范围显示setState执行，但不是回调。

Jest Unit Test：

it("should store the confirmation result", (done) => {

        let wrapper = shallow( <LoginComponent
            sms={{
                enabled: true,
                sms_placeholder: 'Phone Number',
                text: 'Enter your phone number',
                buttonSend: {
                    text: 'SEND'
                }
            }}
        />); 
        wrapper.setState({phone: '1234567890'});

        setTimeout(()=>{
            expect(wrapper.update()).toMatchSnapshot();    
            const spySendSms = jest.spyOn(wrapper.instance(), "sendSms");
            const spyError = jest.spyOn(wrapper.instance(), "error");
            wrapper.update().find("[testID='smsButtonSend']").simulate("press");
            expect(spySendSms).toHaveBeenCalledTimes(1);
            expect(spyError).toHaveBeenCalledTimes(0);                      
            done();         
        }, 100);  });

我一直在阅读关于向Jest返回一个承诺，所以它们都被链接，但我只看到用fetch制作并将函数作为道具传递给组件，并且我在组件内直接具有所有功能。

我应该重构需要外部功能的组件吗？在每个单元测试中覆盖和模拟内部函数？

测试这些复杂的场景非常困难。

如何避免在jest /酶单元测试中使用setTimeout来提供反应本机时间来呈现异步函数

0 个答案: