移动端 UI 测试时如何正确模拟点击事件？

志鸣（打工版）提问于 2026-03-22 15:06:22 阅读 5

移动

我在用 Jest + React Testing Library 做移动端 UI 测试，但发现按钮的点击回调没被触发。明明在浏览器里点得好好的，测试里就是不执行。

我试过用 fireEvent.click，也换成 userEvent.click 了，还是不行。是不是因为组件用了 onTouchStart 或者某些移动端特有的事件？

const MyButton = () => {
  const handleClick = () => console.log('clicked!');
  return (
    <button
      onTouchStart={handleClick}
      onClick={handleClick}
      style={{ padding: '12px' }}
    >
      点我
    </button>
  );
};

测试代码就简单地 render 后 click 一下，但控制台没输出。到底该怎么写测试才能覆盖这种移动端交互？

UI测试移动端测试

我来解答赞 1 收藏

反馈

1 条解答

UI名轩 Lv1

遇到这种情况，确实是因为你在移动端环境中使用了 onTouchStart 事件，而 Jest + React Testing Library 默认情况下可能不会触发这些事件。你可以通过模拟触摸事件来解决这个问题。

建议改成直接使用 fireEvent.touchStart 来触发 onTouchStart 事件。以下是修改后的测试代码示例：

pre class="pure-highlightjs line-numbers">

import { render, screen, fireEvent } from '@testing-library/react';

import MyButton from './MyButton';



test('should handle touch start event', () => {

  console.log = jest.fn(); // 捕获 console.log 的输出

  render();

  

  const button = screen.getByText(/点我/i);

  fireEvent.touchStart(button);



  expect(console.log).toHaveBeenCalledWith('clicked!');

});

这样可以确保 onTouchStart 事件被正确触发，测试也能按预期工作。希望这能帮到你，测试写起来有时候真是挺头疼的。

2026-03-22 15:07