我有一个要测试的无状态组件
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)
});
但 spy 从未被召唤过。我这样做对吗?
最佳答案
我设法通过直接调用 onChange 属性让它工作
select.props.onChange({ target: { value: 25 } })
正如我注意到他们对 https://github.com/facebook/react/blob/master/src/test/tests/ReactTestUtils-test.js 中的点击事件所做的那样
关于javascript - 使用浅层渲染测试无状态 react 组件中的交互,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35652260/