我有一个简单的Icon
组件,它接受一个onClick()
属性,在单击图标时调用该函数。另外,每当单击该图标时,还会调用另一个函数event.stopPropagation()
。这个函数是由图标触发的实际点击事件的属性(=表示基本)。
现在我想要检查两件事:
onClick
属性函数应该被调用。- 通过事件传递的
stopPropagation
回调应该被调用。
以前我使用enzyme进行测试,效果非常好。
test('Icon should call the callback on when space is pressed', () => {
const onClick = jest.fn();
const stopPropagation = jest.fn();
const icon = shallow(<Icon className="test" name="su-pen" onClick={onClick} />);
icon.simulate('keypress', {key: ' ', stopPropagation});
expect(onClick).toBeCalled();
expect(stopPropagation).toBeCalled();
});
现在我想将它迁移到React测试库。我已经尝试使用fireEvent
,但是stopPropagation()
没有被调用。
test('Icon should call the callback on click', () => {
const onClick = jest.fn();
const stopPropagation = jest.fn();
render(<Icon className="test" name="su-pen" onClick={onClick} />);
const icon = screen.queryByLabelText('su-pen');
fireEvent.click(icon, {stopPropagation});
expect(onClick).toBeCalled();
expect(stopPropagation).toBeCalled();
// ^ --> failed
// Expected number of calls: >= 1
// Received number of calls: 0
});
keypress
事件,但是当使用RTL时,您触发click事件。它们是不同的事件。 - Lin Du