状態を更新するコンポーネントメソッドを呼び出した後の反応状態をテストする方法 - 酵素を使用して

Question

酵素の初心者はここにあります。 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()と呼んでこれを試しましたが、これもうまくいきませんでした。 React#setStateから

Answer 1

、

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：

あなたは `wrapper.update（呼び出す場合、それは動作しますsetState callback

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

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