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

Question

酵素新手在这里。我试图在调用该组件上的方法后测试是否正在更新React组件的状态。

这是我正在测试的组件的片段：

CONVERT(VARCHAR, CAST(
 CASE WHEN table2.rates ='4' 
      THEN table1.hourlyrate 
      ELSE table1.hourlyrate END as decimal(18,4)))

以下是测试：

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...
  }

}

我的测试失败，出现以下错误：

我知道更新状态不是同步的，但我不确定这是否与此有关，或者是否有更好的方法使用Enzyme进行测试。如果有人能指出我正确的方向，我将非常感激。哦，我在测试中调用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.update()来尝试此操作，但这也没有用。

Answer 1

来自React#setState，

setState（更新程序，[回调]）

  

setState()将组件状态的更改排入队列。   setState没有立即更新状态。 setState()并不总是立即更新组件。它可以批量推迟更新或推迟更新。这会在调用this.state潜在陷阱后立即阅读setState()。相反，请使用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);
});