[英]Testing interactions in stateless react component using shalllow rendering
我有一個要測試的無狀態組件
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)
});
間諜從未被召喚。 我這樣做對嗎?
我設法通過直接調用onChange道具使其工作
select.props.onChange({ target: { value: 25 } })
正如我注意到的,他們對https://github.com/facebook/react/blob/master/src/test/ tests /ReactTestUtils-test.js中的click事件做了處理
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.