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

Question

我有一个功能按钮组件（从我的实际按钮组件中简化而来），它有一个 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');
  
  // ...
})

Answer 1

如果你通过 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 会发生什么。

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

How can I test a functional React component's clickHandler using Jest and React Test Library?

reactjs

jestjs

react-testing-library