javascript - 如何使用 Jest 0.8.x 测试像 react-router 2.0 中那样使用上下文的 React 组件

Question

我过去在使用旧版本的 react-router 时遇到过这个问题，我使用以下方法解决了这个问题:stubRouterContext + 一种访问组件实例的 hacky 方式(使用 refs: https://github.com/reactjs/react-router/issues/1140#issuecomment-113174774 )

我认为这在未来会有所改进，但我在使用 react-router 2.0 时遇到了同样的问题(我并不是说这是 react-router 的问题，但由于它使用上下文，它会影响我的测试)。所以，我有一个使用上下文将新状态推送到 url this.context.router.push(...) 的组件，这是现在要走的路 https://github.com/reactjs/react-router/blob/master/upgrade-guides/v2.0.0.md#programmatic-navigation

我告诉 jest.dontMock('react-router') 但是我的测试会失败:


类型错误:无法读取未定义的属性“推送”


发生这种情况是因为 TestUtils.renderIntoDocument 返回的实例将具有:


上下文:对象{路由器:未定义}


现在，这里真正的问题是什么？是杰斯特吗？我很确定我不是唯一遇到此问题的人，因为 stubRouterContext它不在 official docs 中不再使用 react-router，是否有任何广泛接受的解决方案？

我如何使测试起作用？这基本上具有正确的上下文并且能够访问 TestUtils.renderIntoDocument 返回的组件实例中的所有内容。

我正在使用 react 0.14.7、jest-cli 0.8.2 和 react-router 2.0。

Answer 1

这是我为我的上下文相关组件最终完成的设置(当然，为了简单起见，进行了精简):

// dontmock.config.js contains jest.dontMock('components/Breadcrumbs')
// to avoid issue with hoisting of import operators, which causes 
// jest.dontMock() to be ignored

import dontmock from 'dontmock.config.js';
import React from "react";
import { Router, createMemoryHistory } from "react-router";
import TestUtils from "react-addons-test-utils";

import Breadcrumbs from "components/Breadcrumbs";

// Create history object to operate with in non-browser environment
const history = createMemoryHistory("/products/product/12");

// Setup routes configuration.
// JSX would also work, but this way it's more convenient to specify custom 
// route properties (excludes, localized labels, etc..).
const routes = [{
  path: "/",
  component: React.createClass({
    render() { return <div>{this.props.children}</div>; }
  }),
  childRoutes: [{
    path: "products",
    component: React.createClass({
      render() { return <div>{this.props.children}</div>; }
    }),
    childRoutes: [{
      path: "product/:id",
      component: React.createClass({
        // Render your component with contextual route props or anything else you need
        // If you need to test different combinations of properties, then setup a separate route configuration.
        render() { return <Breadcrumbs routes={this.props.routes} />; }
      }),
      childRoutes: []
    }]
  }]
}];

describe("Breadcrumbs component test suite:", () => {
  beforeEach(function() {
    // Render the entire route configuration with Breadcrumbs available on a specified route
    this.component = TestUtils.renderIntoDocument(<Router routes={routes} history={history} />);
    this.componentNode = ReactDOM.findDOMNode(this.component);
    this.breadcrumbNode = ReactDOM.findDOMNode(this.component).querySelector(".breadcrumbs");
  });

  it("should be defined", function() {
    expect(this.breadcrumbNode).toBeDefined();
  });

  /**
   * Now test whatever you need to
   */