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

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>
    );
  }
}

我想用 "shallow rendering":

来测试

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>
    );
  });
});

我希望 "shallow rendering" 渲染除其他 React 组件之外的所有内容。但是因为它是 1 级深，所以这个测试失败了。

应该是：

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

所以我无法到达 Avatar 因为它嵌套很深。

如何使用 "shallow rendering" 指定深度？

更好：

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

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，但这是我知道如何完成您正在寻找的最好方法。他们提供的 example 很好地说明了它的功能。

希望对您有所帮助！如果我未能解决您的一些顾虑，请告诉我。

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

How to shallow render everything except sub react components or specify a depth

javascript

mocha.js

reactjs

react-jsx

jestjs