5

Jest を使用して React コンポーネントをテストしています。ただし、サブコンポーネントにメソッドを (小道具として) 渡すコンポーネントをテストする方法がわかりません (または何も見ていません)。たとえばForm、 、MemberList、Member、 がありFormButtonます。コードでこれに似たもの：

形：

<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.

フォームボタン:

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

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

私は正しい考え方で考えていますか？追加するために、実用的な例はありますか?

*React と Jest を試す前にテストしたことはありません。

4

1 に答える 1

5

解決策は、モック化された関数をサブ コンポーネントに直接渡してテストすることです。複数の「サブコンポーネント」を含むものは、通常、複数の機能ユニットをテストしているため、真の単体テストではありません。

だから私は作成します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。

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)

  })
})

欠けているアサーションは、メンバー リストに渡された削除ハンドラーがメンバー コンポーネントに正しく渡されているということです。では、別のテストを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}]])

})

次に、フォーム コンポーネントで同じパターンを実行するだけです。メンバー リストとボタンをモックし、それらを個別にテストして、正しいハンドラーとデータが渡されることを確認します。

うまくいけば、これが理にかなっており、返信だけでなくても、Skype などで説明できるかもしれません。

于 2014-12-07T22:03:32.450 に答える