使用Jest和Testing Library测试元素是否至少被聚焦过一次

核心思路是通过监听目标输入框的聚焦事件，验证聚焦行为是否触发。你可以选择两种实现方式：

方式1：给输入框绑定自定义focus监听 #

import { render } from '@testing-library/react';
import FocusCertainFieldsAtLeastOnce from './你的组件实际路径';

test('id为input1和input2的输入框都至少被聚焦一次', () => {
  const input1FocusSpy = jest.fn();
  const input2FocusSpy = jest.fn();

  render(
    <div>
      <input id='input1' onFocus={input1FocusSpy} />
      <input id='input2' onFocus={input2FocusSpy} />
      <FocusCertainFieldsAtLeastOnce />
    </div>
  );

  // 验证聚焦事件被触发
  expect(input1FocusSpy).toHaveBeenCalled();
  expect(input2FocusSpy).toHaveBeenCalled();
});

方式2：不修改原有渲染结构，直接监听原生focus方法 #

如果不想额外给输入框加onFocus属性，也可以直接劫持DOM元素的原生focus方法：

import { render } from '@testing-library/react';
import FocusCertainFieldsAtLeastOnce from './你的组件实际路径';

test('id为input1和input2的输入框都至少被聚焦一次', () => {
  const { container } = render(
    <div>
      <input id='input1' />
      <input id='input2' />
      <FocusCertainFieldsAtLeastOnce />
    </div>
  );

  const input1 = container.querySelector('#input1');
  const input2 = container.querySelector('#input2');

  // 挂载focus方法间谍
  const input1Spy = jest.spyOn(input1, 'focus');
  const input2Spy = jest.spyOn(input2, 'focus');

  expect(input1Spy).toHaveBeenCalled();
  expect(input2Spy).toHaveBeenCalled();

  // 测试结束后恢复原方法，避免影响其他用例
  input1Spy.mockRestore();
  input2Spy.mockRestore();
});

如果你需要校验聚焦次数严格为1次，可以把toHaveBeenCalled()替换为toHaveBeenCalledTimes(1)。

内容的提问来源于stack exchange，提问作者Mr_Somebody