如何使用 Jest 0.8.x 测试使用上下文的 React 组件，例如在 react-router 2.0 中

How to test a React component that uses context like in react-router 2.0 with Jest 0.8.x

本文关键字：组件 react-router React 上下文 Jest 何使用 测试      更新时间：2023-09-26

我过去在使用旧版本的 react-router 时遇到过这个问题，我使用：stubRouterContext + 一种访问组件实例的黑客方式（使用 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 }

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

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

我正在使用 react 0.14.7、jest-cli 0.8.2 和 react-router 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
   */

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

堆栈：React 0.14，

反应路由器 1.0，历史 1.14，茉莉花 2.4

接下来就解决了。

对于 react-router 历史记录，我使用"history/lib/createBrowserHistory"，它允许没有哈希的链接。此模块是单例。这意味着一旦创建，它就可以通过您的所有应用程序使用。所以我决定扔掉历史混合，直接使用来自单独组件的历史：

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

工作起来就像一个魅力，可以很容易地测试。没有更多的混合，没有更多的上下文（至少在这种特殊情况下）。我相信同样的方法可以用于标准反应路由器浏览器历史记录，但没有检查。

相关文章：