React 测试渲染器模拟元素点击

使用React测试渲染器模拟元素点击

javascript
import React from 'react';
import { render, unmountComponentAtNode } from 'react-dom';
import { act } from 'react-dom/test-utils';
function Button(props) {
  const handleClick = () => {
    props.onClick();
  };
  return {props.label};
}
let container = null;
beforeEach(() => {
  // 设置一个DOM元素作为渲染容器
  container = document.createElement('div');
  document.body.appendChild(container);
});
afterEach(() => {
  // 清理渲染容器
  unmountComponentAtNode(container);
  container.remove();
  container = null;
});
it('点击按钮后调用回调函数', () => {
  const onClick = jest.fn();
  act(() => {
    render(, container);
  });
  // 获取按钮元素
  const button = container.querySelector('button');
  // 模拟点击事件
  act(() => {
    button.dispatchEvent(new MouseEvent('click', { bubbles: true }));
  });
  // 断言回调函数被调用
  expect(onClick).toHaveBeenCalledTimes(1);
});