javascript - 用 Enzyme 听 onClick

Question

我想断言，当单击禁用按钮时，不会触发其 onClick 事件。我如何用 enzyme 来做到这一点？请参阅下面的示例代码。谢谢!

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
});

Answer 1

其实没有必要对此进行测试。 disabled 属性是底层 HTML 的一部分，因此通过测试它，您只是测试 HTML button 是否有效(您可以相信它确实有效)。更好的测试可能是检查在您尝试测试的条件下 disabled 属性是否设置为 true。

也就是说，实现此目的的一种方法是通过 props 将 onClick 注入(inject)到 SampleButton 中，如下所示:

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();
});