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')，但我的测试将失败：

TypeError: Cannot read property 'push' of undefined

这是因为TestUtils.renderIntoDocument返回的实例将具有：

context: Object { router: undefined }

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

我如何让测试工作？这基本上具有正确的上下文，并且能够从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
   */

Answer 2

有同样的麻烦，在单元测试中未定义this.context.history 。

Stack：React 0.14，react-router 1.0，history 1.14，jasmine 2.4

下一步解决了。

对于react-router历史记录，我使用＆＃34; history / lib / createBrowserHistory＆＃34; ，它允许没有哈希的链接。这个模块是单身。这意味着一旦创建它就可以用于所有应用程序。所以我决定抛弃历史mixin并直接从单独的组件中使用历史记录：

// history.js

import createBrowserHistory from 'history/lib/createBrowserHistory'
export default createBrowserHistory()


// app.js

import React from 'react'
import ReactDOM from 'react-dom'
import { Router, Route, IndexRoute } from 'react-router'

import history from './history'
import Main from './Main'

const Layout = React.createClass({
  render() {
    return <div>{React.cloneElement(this.props.children)}</div>
  }
})

const routes = (
  <Route component={Layout} path='/'>
    <IndexRoute component={Main} />
  </Route>
)

ReactDOM.render(
  <Router history={history}>{routes}</Router>, 
  document.getElementById('my-app')
)


// Main.js

import React from 'react'
import history from './history'

const Main = React.createClass({
  next() {
    history.push('/next_page')
  },

  render() {
    return <button onClick={this.next}>{'Go to next page'}</button>
  }
})

export default Main

像魅力一样，可以轻松测试。没有更多的混合，没有更多的背景（至少在这种特殊情况下）。我相信同样的方法可以用于标准的反应路由器浏览器历史记录，但是没有检查。

如何使用反应路由器2.0和Jest 0.8.x测试使用上下文的React组件

2 个答案: