ReactJS:测试包含组件的组件 [英] ReactJS: Testing components containing components

问题描述

我使用Jest测试我的React组件.但是，我不知道(或什么也没看)如何测试通过方法(作为道具)传递给子组件的组件.例如，我有:Form，MemberList，Member，FormButton.在代码中与此类似:

I use Jest to test my React Components. However, I have no idea (or haven't seen anything) how to test components that pass (as prop) on methods to sub components. For instance, I have: Form, MemberList, Member, FormButton. Something similar to this in code:

表格:

<MemberList members={this.state.members} remove={this.remove} add={this.add} />
<FormButton data={this.state.members} />

会员列表:

<span onClick={this.add}> <!-- add button --> </span>
{this.props.members.map(function(member, index) {
  <Member key={index} data={member} remove={this.props.remove} />
})}

成员:

// some input like name and so, and a remove itself button.

FormButton:

var submit = function() {
    this.setState({ loading: true });

     // xhr
}
<button type="button" onClick={submit} disabled={this.state.loading}>Submit</button>

我在以正确的思维方式思考吗?要补充一点，那里有实际的例子吗?

Am I thinking in the right mindset? To add, are there any practical examples out there?

*在试用React和Jest之前，我从未进行过测试.

*I've never tested before trying out React and Jest.

推荐答案

解决方案是将模拟的函数直接传递给子组件并对其进行测试.涉及多个子组件"的任何事物通常都不是真正的单元测试，因为您正在测试多个功能单元.

The solution is to pass a mocked function directly to the sub components and test them. Anything involving more than one "sub-component" is usually not truly a unit test as you are testing multiple units of functionality.

所以我将创建MemberList-test.js:

describe('MemberList', function () {
  it('calls the add handler when add is clicked', function () {
    var Component = TestUtils.renderIntoDocument(
      <MemberList add={ jest.genMockFn() } />
      );

    const btn = TestUtils.findRenderedDOMComponentWithTag(Component, 'span')

    TestUtils.Simulate.change(btn);

    expect(Component.add.mock.calls.length).toBe(1)

  })
})

然后，而不是尝试直接在应该创建Member-test.js的同一测试中测试成员组件:

Then rather than trying to test your member component directly within the same test your should create Member-test.js:

describe('Member', function () {
  it('calls the add handler when add is clicked', function () {
    var Component = TestUtils.renderIntoDocument(
      <Member remove={ jest.genMockFn() } />
      );

    const btn = TestUtils.findRenderedDOMComponentWithTag(Component,
      'HOWEVER YOU FIND YOUR REMOVE BUTTON')

    TestUtils.Simulate.change(btn);

    expect(Component.remove.mock.calls.length).toBe(1)

  })
})

现在，您缺少的断言是传递到成员列表的remove处理程序正确传递给了Member组件.因此，让我们向MemberList-test.js

Now the assertion your are missing is that the remove handler that is passed into the member list is correctly getting passed down to the Member component. So let's add another test to the MemberList-test.js

it('passes correct information to the children', function () {
  var MemberMock = require('../Member')
  var removeFn = jest.genMockFn();

  var testMember = {WHATEVER YOUR MEMBER OBJECT LOOKS LIKE}

  var Component = TestUtils.renderIntoDocument(
    <MemberList members={ [testMember] }
      remove={ removeFn } />
    );

  // We expect the member component to be instantiated 1 time and
  // passed the remove function we defined
  // as well as a key and the data
  expect(MemberMock.mock.calls).toEqual([[{key: 0, data: testMember,
    remove: removeFn}]])

})

然后，您只需对表单组件执行相同的模式.模拟成员列表和按钮，并分别对其进行测试，以确保传递正确的处理程序和数据.

Then you simply do the same pattern with the form component. Mocking the member list and the button and testing them separately and seeing that the correct handlers and data are passed down.

希望这是有道理的，如果不只是答复，也许我可以在Skype或类似设备上引导您完成它.

Hopefully this makes sense and if not just reply and maybe I can walk you through it on Skype or something.

这篇关于ReactJS:测试包含组件的组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！