如何在調用更新狀態的組件方法後測試React狀態 - 使用Enzyme

Question

Enzyme newbie here。我試圖在調用該組件上的方法之後測試React組件的狀態是否正在更新。

這是組件的一個片段，我測試：

class App extends React.Component { 
    constructor(props) { 
    super(props); 
    } 

    state = { 
    recipes: {}, 
    user: null 
    }; 

    handleUnauth =() => { 
    this.setState({ 
     user: null 
    }); 
    }; 

    render() { 
    //render children, pass down methods as props etc... 
    } 

} 

下面是測試：

import createRouterContext from 'react-router-test-context'; 
import { shallow, mount } from 'enzyme'; 
import expect from 'expect'; 
import React from 'react'; 

import App from 'App'; //import with webpack alias 

describe('App',() => { 

    let wrapper, context; 

    beforeEach(() => { 
    context = createRouterContext(); 
    wrapper = mount(<App/>, { context }); 
    }); 

    it('should remove logged in user details on logout',() => { 
    const user = { 
     uid: 'abc123', 
     name: 'John Doe' 
    }; 

    wrapper.setState({ user },() => { 
     wrapper.instance().handleUnauth(); 
     const userState = wrapper.state('user'); 
     expect(userState).toEqual(null); 
    }); 

    }); 

}); 

我的測試失敗，出現以下錯誤：

我知道更新狀態不是同步但我不確定這是否與此有關，或者如果有更好的方法來使用酶測試。如果有人能夠請正確指導我的話，我會非常感激。噢，我在測試中調用wrapper.instance().handleUnauth()之後立即致電wrapper.update()來嘗試此操作，但這也不起作用。

Answer 1

從React#setState，

的setState（更新器，[回調]）

setState() enqueues changes to the component state. The setState doesn't immediately update the state. setState() does not always immediately update the component. It may batch or defer the update until later. This makes reading this.state right after calling setState() a potential pitfall.Instead, use componentDidUpdate or a setState callback (setState(updater, callback))

解決方案1：從setState

刪除回調;

 wrapper.setState({ user }); 
     wrapper.instance().handleUnauth(); 
     const userState = wrapper.state('user'); 
     expect(userState).toEqual(null); 

解決方案2：

讀取更新狀態的setState callback

wrapper.setState({ user }, (userState) => { 

     wrapper.instance().handleUnauth(); 
     //const userState = wrapper.state('user'); // comment it. 
     expect(userState).toEqual(null); 
});