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的正确prop。它在浏览器中工作正常。

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

这似乎与尝试定位子组件呈现的dom节点有关。但我不知道该怎么办。（编辑：或者它可能是特定于react-bootstrap？也许我不需要模拟一些依赖...？）

Answer 1

对我来说，答案是不要嘲笑＆＃39;类名＆＃39; - 这是react-bootstrap的依赖：

jest.dontMock 'classnames'

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

如何对使用Reest Bootstrap和Jest的Component进行行为测试

1 个答案: