如何浅化除子反应组件以外的所有内容或指定深度_JavaScript

我有一个组成部分：

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因为它是深深嵌套的。

如何使用“浅渲染”指定深度？

更好的是：

我怎样才能使每一个元素做出反应，除了在这种情况下定制的反应的组分Avatar ？

由于您在评论中要求我回答，因此，我将尽力解决您提出的问题。

您提出的第一个问题是如何使用浅层渲染指定深度。 我无法真正回答您的问题，但我仍然认为我可以帮助通过失败的考试。 你真正寻找的是一个方法，以确保一个<Avatar/>渲染你当组件被渲染<PlayerProfile/>组件，如<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/>组件在呈现时发生一些不需要的行为，则您想对这个组件进行存根处理，以免发生行为，这使我想到了第二个问题...

我在评论中提到的库具有对组件进行存根的功能，以便在呈现组件时呈现一个存根。 默认情况下，这些存根仅具有有效React组件所需的最低行为。

不幸的是，使用茉莉反应助手功能将要求您切换到使用茉莉而不是Mocha，但这是我知道如何完成所需内容的最佳方法。 他们提供的很好地说明了其功能。

我希望这有帮助！ 让我知道我是否无法解决您的某些担忧。

如何浅化除子反应组件以外的所有内容或指定深度

问题描述

1楼