web-dev-qa-db-ja.com

ユニットテスト：酵素を使用して、親の子コンポーネントのクリックイベントをシミュレートします

親コンポーネントと、単なる「ラベル」要素である子コンポーネントがあります。子要素をクリックすると、親コンポーネントの関数を呼び出す必要があります。呼び出されることを期待していますが、状態は変化せず、カバレッジファイルを見たときに関数が呼び出されていません。

**更新：**コードは開発用に機能します。失敗するのは単体テストだけです。

これが私の親コンポーネントです

parent.js

export default class Parent extends Component {
  constructor(props) {
   super(props)
   this.state={clickedChild: false}
   this.handleChildClick = this.handleChildClick.bind(this)
  }

  handleChildClick(index) {
    this.setState({clickedChild:true})
  }

  render(){
   const self = this
   return(
    const items = [{'id':1,'text':'hello'},{'id':2,'text':'world'}]
     <div>
       {items.map(function(item,index){
         return <ChildComponent onChildClick ={ self.handleChildClick.bind(null,index)} childItem={item} />
       })}
     </div>
   )}
}

子コンポーネント

export default class ChildComponent extends Component {
    constructor(props) { super(props)}

   render(){
    return(
     <label onClick={this.props.onChildClick}>{this.props.childItem.text} </label>
    )
   }
}

単体テスト

import chai from 'chai'
import React from 'react'
import ReactDOM from 'react-dom'
import { mount, shallow } from 'enzyme';
import sinon from 'sinon'
import Parent from '../Parent'
import ChildComponent from '../ChildComponent'


let expect = chai.expect
   describe('check click event on child()',()=>{
      it('clicking menu item',()=>{
          const items = [{'id':1,'text':'hello'},{'id':2,'text':'world'}]
          const wrapper = mount(<Parent items={items} />)
          console.log(wrapper.state('clickedChild')) // prints false
          wrapper.find(ChildComponent).last().simulate('click',1)
          // tried the following
          // wrapper.find(ChildComponent).last().simulate('click')

          console.log(wrapper.state('clickedChild'))  // still prints false
        })
    })
javascriptreactjsenzyme
10
Kumar R

親コンポーネントのバインディングをに変更しました

<ChildComponent onChildClick ={() => self.handleChildClick(index)} childItem={item} />

そのメソッドを呼び出していた親コンポーネントで呼び出していた関数もありました。（parent.js）

handleChildClick(index) {
    this.setState({clickedChild:true})
    this.props.handleClick(index) // i had forgotten to see the line.
}

上記のコメント行をテストでスタブした後。すべてが期待どおりに機能しました。

it('clicking menu item', () => {
    const items = [{'id':1,'text':'hello'},{'id':2,'text':'world'}]
    const handleClickStub = sinon.spy()
    const wrapper = mount(<Parent items={items} handleClick={handleClickStub} />)
    console.log(wrapper.state('clickedChild')) // prints false
    wrapper.find(ChildComponent).last().simulate('click')
    expect(handleClickStub.calledOnce).to.be.true // successful
    console.log(wrapper.state('clickedChild'))  // prints true
})
8
Kumar R