Почему не срабатывает Simulate.click в TestUtils?

Question

[Игорь Шумиловский]

Играюсь с тестами (karma, mocha, chai) и не могу понять, почему не работает эмуляция клика. Что неправильно делаю?

Тест:

import React from 'react'
import TestUtils from 'react-addons-test-utils'

import Home from '../app/views/home/home'

describe('home page', () => {
  let home

  beforeEach(() => {
    home = TestUtils.renderIntoDocument(<Home />)
  })

  it('should be abble to hide the content by clicking', () => {
    let title = TestUtils.scryRenderedDOMComponentsWithClass(home, 'title')
    TestUtils.Simulate.click(home)
    expect(title.length).to.equal(0)
  })
})

Компонент:

import React, { Component } from 'react'

class Home extends Component {
  constructor (props) {
    super(props)
    this.state = {
      show: true
    }
  }

  handleClick () {
    this.setState({
      show: !this.state.show
    })
  }

  render () {
    let getTitle = () => {
      return this.state.show ? (
        <h1 className='title'>Home page</h1>
      ) : ''
    }
    return (
      <div className='page' onClick={this.handleClick}>
        {getTitle()}
      </div>
    )
  }
}

export default Home

Клик должен рендерить | не рендерить заголовок по состоянию стейта. Короче, после клика, title.length должен стать 0, но он остается 1

Answer 1

[Игорь Шумиловский]

Нашел ошибки. Клик не срабатывает, потому что нужно "кликать" нужно по ноде, а не по композитному компоненту. Потому этот код:

let title = TestUtils.scryRenderedDOMComponentsWithClass(home, 'title')
    TestUtils.Simulate.click(home)
    expect(title.length).to.equal(0)

нужно заменить на:

let homeNode = TestUtils.findRenderedDOMComponentWithTag(home, 'div')
    TestUtils.Simulate.click(homeNode)
    title = TestUtils.scryRenderedDOMComponentsWithClass(home, 'title')
    expect(title.length).to.equal(0)

Тогда клик будет срабатывать.
P.S. В компоненте еще допустил ошибку - забыл bind поставить на функцию handleClick

<div className='page' onClick={this.handleClick.bind(this)}>