我想断言,当单击禁用的按钮时,不会触发其onClick
事件。我该如何用酵素做到这一点?请参阅下面的示例代码。谢谢!
sampleButton.jsx:
import React from 'react';
const SampleButton = () => (
<button
disabled={true}
onClick={() => console.log('You clicked me!')}
test-attr="button"
type="button"
>
Click Me
</button>
);
export default SampleButton;
sampleButton.test.jsx:
import React from 'react';
import { shallow } from 'enzyme';
import SampleButton from './sampleButton';
test('cannot click button if disabled', () => {
const wrapper = shallow(<SampleButton />);
const button = wrapper.find('[test-attr="button"]');
button.simulate('click');
// assert that `onClick` has not been fired
});
答案 0 :(得分:1)
实际上没有必要对此进行测试。 disabled
道具是基础HTML的一部分,因此通过对其进行测试,您只是在测试HTML button
是否有效(您可以相信它可以工作)。更好的测试可能是在您要测试的条件下检查disabled
属性是否设置为true
。
也就是说,一种实现方法是通过onClick
将SampleButton
注入props
,如下所示:
const SampleButton = ({ onClick }) => (
<button
disabled={true}
onClick={onClick}
test-attr="button"
type="button"
>
Click Me
</button>
);
然后您可以像这样测试它:
test('cannot click button if disabled', () => {
// Set up a mock function that allows you to make assertions
const mockOnClick = jest.fn();
// Pass it into SampleButton
const wrapper = shallow(<SampleButton onClick={mockOnClick} />);
const button = wrapper.find('[test-attr="button"]');
button.simulate('click');
// Make assertions
expect(mockOnClick).not.toHaveBeenCalled();
});