如何浅层渲染除子反应组件之外的所有内容或指定深度

Question

我有一个组件：

class PlayerProfile extends React.Component {
  render() {
    const { name, avatar } = this.props;
    return (
      <div className="player-profile">
        <div className="inline-block">
          <Avatar src={avatar}/>
        </div>
      </div>
    );
  }
}

我想用"浅层渲染"来测试这个：

describe('PlayerProfile component - testing with shallow rendering', () => {
  beforeEach(function() {
   let {TestUtils} = React.addons;
    this.TestUtils = TestUtils;
    this.renderer = TestUtils.createRenderer();
    this.renderer.render(<PlayerProfile name='user'
                                            avatar='avatar'/>);
  });
  it('renders an Avatar', function() {
    let result = this.renderer.getRenderOutput();
    expect(result.type).toEqual('div');
    expect(result.props.className).toEqual('player-profile');
    // Now the children
    expect(result.props.children).toEqual(
      <div className="inline-block">
        <Avatar src='avatar'/>
      </div>
    );
  });
});

我希望"浅层渲染"能够渲染除其他React组件之外的所有内容。但由于深度为1级，因此此测试失败。

相反，它应该是：

 expect(result.props.children).toEqual(
      <div className="inline-block">
      </div>
    );

所以我无法访问Avatar，因为它嵌套得很深。

如何使用"浅层渲染"指定深度？

更好：

在这种情况下，除了自定义React组件Avatar之外，我如何渲染每个React元素？

Answer 1

既然你在评论中问我答案，我会尽力回答你提出的问题。

您问的第一个问题是如何使用浅层渲染指定深度。我真的不能回答你的问题，但我仍然认为我可以帮助通过那次失败的测试。你真正想要的是确保在渲染<PlayerProfile/>组件时渲染<Avatar/>组件的方法，因为<Avatar/>是<PlayerProfile/>的子级。我不会对此使用浅层渲染。相反，为什么不试试这样的东西：

var React = require('react/addons');
var TestUtils = React.addons.TestUtils;
var PlayerProfile = require('./playerprofile.jsx'); //or whatever your jsx file is called
describe('PlayerProfile', function () {
    it('renders an Avatar', function () {
        var Avatar = require('./avatar.jsx'); //or whatever your jsx file is called
        var playerProfile = TestUtils.renderIntoDocument(<PlayerProfile name='user' avatar='avatar'/>);
        var numberOfAvatars = TestUtils.scryRenderedComponentsWithType(playerProfile, Avatar).length;
        expect(numberOfAvatars).toEqual(1);
    });
});

这将完全呈现<Avatar/>组件(假设它是<PlayerProfile/>的子级(，并进行测试以确保它存在。现在，如果您的<Avatar/>组件在渲染时出现了一些不需要的行为，那么您可能希望截断该组件，这样就不会发生行为，这就引出了您的第二个问题。。。

我在评论中提到的库jasmine react能够截断组件，这样在渲染组件时，就会呈现一个存根。默认情况下，这些存根只具有有效React组件所需的最小行为。

不幸的是，使用jasmine react辅助功能需要您切换到使用jasmine而不是Mocha，但这是我所知道的实现您想要的目标的最佳方式。他们提供的示例很好地说明了它的功能。

我希望这能有所帮助！如果我没有解决你的一些担忧，请告诉我。