測試交互使用shalllow渲染

Question

我有我想測試一個無狀態的成分反應成分

const PageSizer = ({itemsPerPage, onItemsPerPageChange}) => (
    <form> 
     <label>Items Per Page </label> 
     <select value={itemsPerPage} onChange={(e) => {onItemsPerPageChange(e.target.value) }}> 
      <option value="10">10</option> 
      <option value="25">25</option> 
      <option value="50">50</option> 
      <option value="100">100</option> 
     </select> 
    </form>) 

我想測試，當選擇值爲改變它觸發onItemsPerPageChange回調與期權的價值。

我發現通過試驗和錯誤renderIntoDocument不作爲其無狀態組件。

使用淺層渲染如何測試？

我想出了

it('should call onItemsPerPageChange when select value is changed',() => { 

    var spy = expect.createSpy(); 

    var shallowRenderer = TestUtils.createRenderer(); 
    shallowRenderer.render(<PageSizer onItemsPerPageChange={spy} />) 
    var result = shallowRenderer.getRenderOutput(); 

    var select = result.props.children[1] 
    TestUtils.Simulate.change(select, { target: { value: 25 } }); 

    expect(spy).toHaveBeenCalledWith(25) 
}); 

的間諜不會被調用雖然。我做對了嗎？

Answer 1

我設法得到它的工作通過調用的onChange託直接

select.props.onChange({ target: { value: 25 } }) 

，因爲我注意到他們在https://github.com/facebook/react/blob/master/src/test/tests/ReactTestUtils-test.js

做了與click事件