使用 Link 测试 React 路由器答案

【问题标题】：Testing React Router with Link使用 Link 测试 React 路由器
【发布时间】：2015-04-14 10:11:42
【问题描述】：

我在寻找一个测试 React Router 链接的好解决方案时做噩梦。它正在传递“正确渲染类别”，但是零链接被传递给测试，我尝试了很多不同的东西，但仍然一无所获。

以下是我要测试的内容：

组件

import React from 'react';
import { Link } from 'react-router';

class Categories extends React.Component {

constructor(props, context){
    super(props);
    context.router
}

render() {
    return (
        <nav className="categories">
          <ul>
              <li><Link to="devices">Devices</Link></li>
              <li><Link to="cases">Cases</Link></li>
              <li><Link to="layouts">Layouts</Link></li>
              <li><Link to="designs">Designs</Link></li>
          </ul>
        </nav>
    );
  }
}

Categories.contextTypes = {
 router: React.PropTypes.func.isRequired
};

export default Categories;

StubRouterContext

import React from 'react';
import objectAssign from 'object-assign';

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

objectAssign(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 () {
    console.log('blah');
  return {
    router: RouterStub,
    routeDepth: 0
  };
},

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

export default stubRouterContext;

组件测试

var expect = require('chai').expect;

var React = require('react/addons');
var Categories = require('../app/src/js/components/Categories.React.js');
var stubRouterContext = require('../test-utils/stubRouterContext.js');
var TestUtils = React.addons.TestUtils;

describe('Categories', function() {
  var categoriesWithContext = stubRouterContext(Categories);

  it('renders Categories properly', function() {
  var categories = TestUtils.renderIntoDocument(<categoriesWithContext />, {});
});

it('renders 4 links', function() {
  var catLinks = TestUtils.scryRenderedDOMComponentsWithTag(categoriesWithContext, 'a');
  expect(catLinks).to.have.length(4);
});
});

【问题讨论】：

标签： unit-testing reactjs react-router

【解决方案1】：

我遇到了完全相同的问题。在最新版本的 react-router 中，您不需要上下文来呈现链接元素，因此这不是问题。但是，如果您像我一样坚持使用 API 1.0 之前的版本，那么 stubRouterContext 方法效果很好。

我和 OP 发现我们的包装器呈现空的唯一原因是使用了 camelCase 组件名称。

var categoriesWithContext = stubRouterContext(Categories); 变为 var CategoriesWithContext = stubRouterContext(Categories);。

因此var categories = TestUtils.renderIntoDocument(<categoriesWithContext />,{}); 变为var categories = TestUtils.renderIntoDocument(<CategoriesWithContext />,{});。

此方法的说明在这里 - https://gist.github.com/sebmarkbage/f1f4ba40816e7d7848ad。

【讨论】：

【解决方案2】：

我注意到的第一件事是您没有在第二个测试中重新渲染“categoriesWithContext”。

it('renders 4 links', function() {
  var categories = TestUtils.renderIntoDocument(<categoriesWithContext />, {});
  var catLinks = TestUtils.scryRenderedDOMComponentsWithTag(categories, 'a');
  expect(catLinks).to.have.length(4);
});

虽然我自己没有运行您的代码，但接下来我注意到的是您获取链接的方式。在我的测试中，我必须手动挖掘层次结构。

试试这个。

it('renders 4 links', function() {
  var categories = TestUtils.renderIntoDocument(<categoriesWithContext />, {});
  var ul = TestUtils.findRenderedDOMComponentWithTag(categories, 'ul');
  var lis = TestUtils.scryRenderedDOMComponentsWithTag(ul, 'li');
  lis.forEach(function(li) {
    // this should throw if <a/> is not found
    var a = TestUtils.findRenderedDOMComponentWithTag(li, 'a');
    // but write an explicit expectation anyway
    expect(a);
  });
});

【讨论】：