4

我过去在使用旧版本的 react-router 时遇到了这个问题，我使用以下方法解决了这个问题：stubRouterContext + 一种访问组件实例的 hacky 方式（使用参考：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-导航

我在说jest.dontMock('react-router')，但我的测试将失败：

TypeError: Cannot read property 'push' of undefined

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

context: Object { router: undefined }

现在，这里真正的问题是什么？是杰斯特吗？我很确定我不是唯一遇到此问题的人，并且由于stubRouterContext它不再出现在 react-router 的官方文档中，是否有任何广泛接受的解决方案？

我将如何使测试工作？这基本上具有正确的上下文，并且能够从TestUtils.renderIntoDocument.

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

4

2 回答 2

0

这是我最终为我的上下文相关组件设置的设置（为了简单起见，当然被删除了）：

// 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
   */
于 2016-03-08T01:26:08.770 回答
0

有同样的麻烦，undefined this.context.history in unit tests。

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

下一个方法解决了。

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

// 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

像魅力一样工作，可以轻松测试。没有更多的混入，没有更多的上下文（至少在这种特殊情况下）。我相信同样的方法可以用于标准的 react-router 浏览器历史，但没有检查。

于 2016-03-29T11:17:19.610 回答