时间戳

首页 > 解决方案 > 如何使用 Jest 和 React 测试库测试功能性 React 组件的 clickHandler？

reactjs - 如何使用 Jest 和 React 测试库测试功能性 React 组件的 clickHandler？

问题描述

我有一个功能按钮组件（从我的实际按钮组件中简化），clickHandler只要单击它就会触发。如何测试该特定函数是否被调用？我知道我可以创建自己的const mockClickHandler = jest.fn();并将其附加到按钮上，但我想测试 Button 组件中已经存在的处理程序。

// Button.jsx

const Button = () => {
  const clickHandler = () => {
    // code
  }

  render(
    <button onClick={clickHandler}>
      Click Me
    </button>
  )
}

// Button.spec.jsx

test('Click event functions properly', () => {
  const { getByRole } = render(<Button />)
  const button = getByRole('button');
  
  // ...
})

标签： reactjsjestjsreact-testing-library

解决方案

如果你通过 props 传递 clickHandler，你可以做这样的事情

it('calls "onClick" prop on button click', () => {
  // Render new instance in every test to prevent leaking state
  const onClick = jest.fn();
  const { getByRole } = render(<Button onClick={onClick} />);

  fireEvent.click(getByText(/click me nao/i));
  expect(onClick).toHaveBeenCalled();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

如果您不想通过道具传递它，您可以测试单击后 DOM 会发生什么。

推荐阅读