javascript - 使用 Jest 测试时，componentWillUpdate 上的 nextState 不正确(还使用 react 路由器包装器)

Question

我正在使用 Jest 0.4.0。我有一个组件包含在其中(来自react-router文档):

var stubRouterContext = (Component, props, stubs) => {
  function RouterStub() { }

  Object.assign(RouterStub, {
    makePath () {},
    makeHref () {},
    transitionTo () {},
    replaceWith () {},
    goBack () {},
    getCurrentPath () {},
    getCurrentRoutes () {},
    getCurrentPathname () {},
    getCurrentParams () {},
    getCurrentQuery () {},
    isActive () {},
    getRouteAtDepth() {},
    setRouteComponentAtDepth() {}
  }, stubs)

  return React.createClass({
    childContextTypes: {
      router: React.PropTypes.func,
      routeDepth: React.PropTypes.number
    },

    getChildContext () {
      return {
        router: RouterStub,
        routeDepth: 0
      };
    },

    render () {
      return <Component {...props} />
    }
  });
};

我的组件使用componentWillUpdate:

  getInitialState: function(){
    return {something: ""};
  },
  componentWillUpdate: function(nextProps, nextState) {
    if(nextState.something === "12345"){
      this.context.router.transitionTo("MyRoute", {id: nextState.something});
    }
  },

在我的测试中:

var ComponentWrapper = stubRouterContext(MyComponent, {});
var myComponentInstance = TestUtils.renderIntoDocument(<ComponentWrapper />);

it('expects to do something on componentWillUpdate', function(){
  myComponentInstance.setState({something: "12345"});
  expect(myComponentInstance.getChildContext().router.transitionTo.mock.calls[0][0]).toEqual('MyRoute'); 
  expect(myComponentInstance.getChildContext().router.transitionTo.mock.calls[0][1]).toEqual({id: '12345'});
});

尽管我调用了 setState，但 componentWillUpdate 中的 nextState 始终是 something: ""。但是，在测试中，如果我检查 myComponentInstance.state 的内容，那么它是 something: "12345"。所以基本上，componentWillUpdate 被调用，但没有新状态，即使我的实例组件有它。

对此有什么想法吗？

--

编辑1

以下建议基于 setState 是异步函数，但这并没有解决问题。我还尝试以这种方式模拟商店更改(通量模式):

myStore.getState = jest.genMockFunction().mockImplementation(function() {
   return{
    something: "12345",
   };
});

myComponentInstance.onChange(); //Simulate store change (this function has setState inside taking values from the store)

好吧，这也不起作用，实际上是告诉我 onChange 未定义。所以我的问题是 react 路由器包装器。我找到了一个解决方案，但我不确定是否有更好的解决方案，因为这个看起来很老套。其内容如下:

var RouterWrapper = stubRouterContext(Component, {ref: "myRealComponentInstance"});
var renderedComponent = TestUtils.renderIntoDocument(<RouterWrapper />);
var myComponentInstance = renderedComponent.refs.myRealComponentInstance;

通过这种方式，myComponentInstance.setState 或模拟 myComponentInstance.onChange 模拟商店都可以工作，我不需要使用异步函数。

Answer 1

setSate 是一个异步函数，因此您需要使用回调，如下所示:

myComponentInstance.setState({something: "12345"}, function() {
  expect(myComponentInstance.getChildContext().router.transitionTo.mock.calls[0][0]).toEqual('MyRoute');
  expect(myComponentInstance.getChildContext().router.transitionTo.mock.calls[0][1]).toEqual({
    id: '12345'
  });
});