0
我有我想测试一个无状态的成分反应成分测试交互使用shalllow渲染
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)
});
的间谍不会被调用虽然。我做对了吗?