reactjs - 如何在调用更新状态的组件方法后测试 React 状态 - 使用 Enzyme

Question

这里是 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);
    });

  });

});

我的测试失败并出现以下错误:

我知道状态更新不是同步的，但我不确定这是否与此有关，或者是否有更好的方法使用 enzyme 来测试它。如果有人能指出我正确的方向，我将非常感激。哦，我在测试中调用 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回调的回调参数中读取更新后的状态

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

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