如何对使用 React Bootstrap 和 Jest 的组件进行行为测试

Question

在伪代码中：

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 的正确道具。它在浏览器中运行良好。

Bootstrap 中的 Pagination 类使用 onClick 并且似乎将其附加到它呈现的 li 元素上，所以我认为我的目标是正确的元素。 （编辑：查看 Bootstrap-react 对 Pagination 组件的测试，该组件针对在 li https://github.com/react-bootstrap/react-bootstrap/blob/master/test/PaginationSpec.js 内呈现的 a 标签。但是；我也尝试过，所以我不认为这是我的问题）。

这似乎与尝试以子组件呈现的 dom 节点为目标有关。但我不知道如何进行。 （编辑：或者它可能是特定于 react-bootstrap 的？也许我不需要模拟一些依赖项......？）

Answer 1

对我来说，答案是不要模拟“类名”——这是 react-bootstrap 的依赖项：

jest.dontMock 'classnames'

答案由http://racingtadpole.com/blog/test-react-with-jest/ 给出，感谢racingtadpole。