如何在React Native的Jest测试中触发自定义Input组件的blur事件

问题根因 #

React Native 的 Jest 测试环境不会模拟原生输入框的焦点切换逻辑，你之前尝试的点击其他输入框、按回车、调用 ref 的 blur 方法都不会自动触发 TextInput 绑定的 onBlur 回调，必须手动触发该事件才能让校验逻辑生效。

解决方法 #

直接使用 fireEvent.blur 主动触发输入框的失焦事件即可，修改后的单测代码如下：

const errorMessage = 'An error message';
it.only('It displays error message when the input is blurred', async () => {
  const { findByText, getByPlaceholderText } = render(
    <Input
      errorText={errorMessage}
      placeholder="placeholder"
      onInputChange={jest.fn()}
      initialValue=""
      // 这里要加上你实际用到的校验规则，比如要求最小长度6，输入的text长度为4就会校验失败
      minLength={6}
      required
    />
  );
  const input = getByPlaceholderText('placeholder');

  fireEvent.changeText(input, 'text');
  // 手动触发blur事件，触发lostFocusHandler更新touched状态
  fireEvent.blur(input);

  const errMsg = await findByText(errorMessage);
  expect(errMsg).toBeTruthy();
});

如果是测试多输入框切换失焦的场景，在第一个输入框输入完成后直接调用fireEvent.blur(第一个输入框元素)即可，和真实交互的逻辑完全一致。

之前操作无效的原因 #

• 调用ref的blur()方法：测试环境下该方法只会修改输入框的原生焦点状态，不会触发JS层绑定的onBlur回调，你的reducer收不到INPUT_BLUR动作，touched字段始终为false，错误提示自然不会展示。
• 点击其他输入框/按回车键：测试环境没有实现原生的焦点自动切换逻辑，这类操作都不会自动触发前一个输入框的onBlur回调，所以无法触发校验。
• 额外注意：测试时要确保输入的内容确实不符合校验规则，否则isValid字段为true也不会显示错误提示。

内容的提问来源于stack exchange，提问作者C.T. Bell