web-dev-qa-db-ja.com

状態を更新するコンポーネントメソッドを呼び出した後、React状態をテストする方法-Enzymeを使用

酵素初心者はこちら。 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);
    });

  });

});
_

私のテストは次のエラーで失敗します：

enter image description here

状態の更新が同期していないことは理解していますが、それがこれと関係があるのか​​、またはEnzymeを使用してこれをテストするためのより良い方法があるのか​​どうかはわかりません。誰かが私を正しい方向に向けてくれたらとてもありがたいです。ああ、私はテストでwrapper.update()を呼び出した直後にwrapper.instance().handleUnauth()を呼び出してこれを試しましたが、これも機能しませんでした。

reactjsenzyme
6
Larrydx

_React#setState_ から、

setState（updater、[callback]）

setState()は、コンポーネントの状態への変更をキューに入れます。 setStateは状態をすぐには更新しません。 setState()は、必ずしもコンポーネントをすぐに更新するとは限りません。更新をバッチ処理または延期する場合があります。これにより、setState()を呼び出した直後に_this.state_を読み取ることが潜在的な落とし穴になります。代わりに、componentDidUpdateまたはsetStateコールバック_(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);
});
_
5
RIYAJ KHAN