Как протестировать поведение компонента, использующего React Bootstrap с Jest

В псевдокоде:

MyComponent: React.createClass
doThis: () ->
  //do something
render: () ->

  <div>
    <button className='something' onClick={clickHandler()}>click this button</button>
    <ReactBootstrap.Pagination onSelect=(this.doThis) items=3 />
  </div> 

//tests

component = TestUtils.renderIntoDocument <MyComponent>

//test1

el = TestUtils.findRenderedDOMComponentWithClass component, 'something'
TestUtils.Simulate.click el

//test2
el = TestUtils.srcyRenderedDOMComponentsWithTag component, 'li'
TestUtils.Simulate.click el[0]

В test1 происходит щелчок. В test2 doThis () не вызывается

В обоих случаях у меня определенно есть dom-узел, и я нажимаю на него щелчок. onSelect - это правильная опора для перехода к ReactBoostrap.Pagination. В браузере работает нормально.

Класс Pagination в Bootstrap использует onClick и, кажется, прикрепляет его к элементу li, который он отображает, поэтому я думаю, что нацелен на правильный элемент. (Изменить: глядя на тест Bootstrap-response для компонента Pagination, который нацелен на тег a, который отображается внутри li https://github.com/react-bootstrap/react-bootstrap/blob/master/test/PaginationSpec.js. Однако я тоже пробовал это, поэтому не не думаю, что это моя проблема).

Похоже, это связано с попыткой нацелить узел dom, отображаемый дочерним компонентом. Но я понятия не имею, как действовать дальше. (Изменить: или, возможно, это относится к реакции-загрузке? Может быть, мне не нужно издеваться над какой-то зависимостью ...?)


person Community    schedule 14.01.2016    source источник


Ответы (1)


Для меня ответ заключался в том, чтобы не высмеивать «имена классов», что является зависимостью от react-bootstrap:

jest.dontMock 'classnames'

Ответ дал: http://racingtadpole.com/blog/test-react-with-jest/, так что спасибо racingtadpole.

person Community    schedule 15.01.2016