Test unitaire : simuler l'événement click du composant enfant dans le parent en utilisant l'enzyme

Question

J'ai un composant parent et un composant enfant qui est juste un élément "label". Lorsque je clique sur l'élément enfant, je dois appeler la fonction du composant parent. Je m'attends à ce qu'elle soit appelée mais l'état ne change pas et lorsque j'ai vu le fichier de couverture, la fonction n'est pas appelée.

**Mise à jour:**Le code fonctionne pour le développement. C'est juste le test unitaire qui échoue.

Voici mon composant parent

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

composant enfant

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

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

test unitaire

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

Answer 1

J'ai modifié la liaison dans mon composant parent en

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

Il y avait aussi une fonction que j'appelais dans mon composant parent qui appelait sa méthode (parent.js).

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

Une fois que j'ai ajouté la ligne commentée ci-dessus dans mon test, tout a fonctionné comme prévu.

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