使用react-testing-library触发mouseLeave时报Node的contains参数类型错误

问题原因 #

fireEvent.mouseLeave默认生成的事件对象不会携带relatedTarget属性，导致e.relatedTarget为undefined，不属于Node类型，调用contains方法时触发类型错误。真实浏览器触发mouseLeave事件时会自动填充relatedTarget为鼠标即将移入的节点，测试环境默认没有模拟这个行为。

解决方案 #

你可以选择以下任意一种方案修复，也可以同时使用提升代码鲁棒性：

• 方案1：测试用例中模拟真实事件参数，触发mouseLeave时手动传入relatedTarget
  示例代码：

  // 模拟鼠标从目标节点移出到页面body，符合真实用户操作场景
  fireEvent.mouseLeave(getAllByTestId("row")[0], {
    relatedTarget: document.body
  });
  

  如果你的业务逻辑需要判断是否移入特定节点，把relatedTarget替换为对应目标节点即可。

• 方案2：业务代码增加类型校验，兼容异常场景
  修改handleMouseLeave逻辑，先判断relatedTarget的类型再执行后续逻辑，避免空值或非节点值导致报错：

  const handleMouseLeave = React.useCallback(
    e => {
      if (e.relatedTarget instanceof Node && !e.currentTarget.contains(e.relatedTarget)) {
        dispatch("MOUSE_OUT");
        onMouseLeave?.(e);
      }
    },
    [dispatch, onMouseLeave]
  );
  

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