使用 Enzyme 收听 onClick

Question

我想断言当一个禁用的按钮被点击时，它的onClick事件不会被触发。我如何用酶来做到这一点？请参阅下面的示例代码。谢谢！示例按钮.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});

Answer 1

真的没有必要测试这个。该disabled道具是底层的HTML的一部分，所以通过测试它只是测试的HTMLbutton作品（你可以相信它）。更好的测试可能是检查disabled道具是否true在您尝试测试的条件下设置。

也就是说，一种方法是将您的onClick注入SampleButtonvia 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();

});