用酶听onClick

时间:2019-06-08 23:56:06

标签: javascript reactjs jestjs enzyme

我想断言,当单击禁用的按钮时,不会触发其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
});

1 个答案:

答案 0 :(得分:1)

实际上没有必要对此进行测试。 disabled道具是基础HTML的一部分,因此通过对其进行测试,您只是在测试HTML button是否有效(您可以相信它可以工作)。更好的测试可能是在您要测试的条件下检查disabled属性是否设置为true

也就是说,一种实现方法是通过onClickSampleButton注入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();
});