Javascript fireEvent.Blur（）在我的自定义输入组件中不起作用 //自定义输入组件 const Container=styled.div``； const InputBase=styled.div` 显示器：flex； 宽度：${（props）=>props.width}； 高度：42px； 证明内容：之间的空间； 对齐项目：居中； 填充：9px 10px； 边界半径：8px； 边框：实心2px${color.gray[200]}； 背景色：白色； &[data focus=“true”]{ 边框：实心2px${color.gray[300]}； } &[data disabled=“true”]{ 背景色：${color.background.original}； } `; const InputArea=styled.input` 宽度：100%； 边界：0； 背景色：继承； 字体大小：15px； 字体大小：正常； &：焦点{ 大纲：无； } &：禁用{ 颜色：${color.gray[600]}； } ：：占位符{ 颜色：${color.gray[600]}； } `; 常量标签=styled.Label` 颜色：${color.gray[600]}； 字体大小：15px； 字体大小：粗体； 显示：内联块； 边缘底部：10px； `; 常量输入：ForwardRefRenderFunction=( {formWidth=“100%”，icon=null，labelText，onFocus，onBlur，…props}， 裁判 ) => { const[isFocus，setIsFocus]=useState（false）； 常量handelFocus=（e）=>{ setIsFocus（真）； if（onFocus）onFocus（e）； }; 常量车把LUR=（e）=>{ setIsFocus（假）； if（onBlur）onBlur（e）； }; 返回( {labelText&&{labelText} {icon} ); }; 导出默认forwardRef（输入）；

我正在将该组件制作成一个库，并在另一个项目中使用它。 在库中测试时，以下代码正常工作

// Custom Input component

const Container = styled.div``;

const InputBase = styled.div<{ width: string }>`
  display: flex;
  width: ${(props) => props.width};
  height: 42px;
  justify-content: space-between;
  align-items: center;
  padding: 9px 10px;
  border-radius: 8px;
  border: solid 2px ${color.gray[200]};
  background-color: white;

  &[data-focus="true"] {
    border: solid 2px ${color.gray[300]};
  }

  &[data-disabled="true"] {
    background-color: ${color.background.original};
  }
`;

const InputArea = styled.input`
  width: 100%;
  border: 0;
  background-color: inherit;
  font-size: 15px;
  font-weight: normal;

  &:focus {
    outline: none;
  }
  &:disabled {
    color: ${color.gray[600]};
  }
  ::placeholder {
    color: ${color.gray[600]};
  }
`;

const Label = styled.label`
  color: ${color.gray[600]};
  font-size: 15px;
  font-weight: bold;
  display: inline-block;
  margin-bottom: 10px;
`;

const Input: ForwardRefRenderFunction<HTMLInputElement, Props> = (
  { formWidth = "100%", icon = null, labelText, onFocus, onBlur, ...props },
  ref
) => {
  const [isFocus, setIsFocus] = useState<boolean>(false);

  const handelFocus = (e) => {
    setIsFocus(true);

    if (onFocus) onFocus(e);
  };

  const handleBlur = (e) => {
    setIsFocus(false);

    if (onBlur) onBlur(e);
  };

  return (
    <Container>
      {labelText && <Label htmlFor={props.id}>{labelText}</Label>}
      <InputBase
        data-focus={isFocus}
        data-disabled={props.disabled}
        width={formWidth}
      >
        <InputArea
          ref={ref}
          type="text"
          {...props}
          onFocus={handelFocus}
          onBlur={handleBlur}
        />
        {icon}
      </InputBase>
    </Container>
  );
};

export default forwardRef(Input);

description（“输入”），（）=>{
它（“测试”，异步（）=>{
const handleBlur=jest.fn（）；
渲染(
);
const input=screen.getByTestId（“输入”）作为HTMLInputElement；
change（输入，{target:{value:“test”}）；
firevent.blur（输入）；
预期（车把）。已被催收时间（1）；
});
});

但是，在使用该库的其他项目中，

fireEvent.blur（输入）

不起作用（toHaveBeenCalledTime为0），而

fireEvent.focusOut（输入）

起作用

库绑定过程是否有问题？还是我遗漏了什么

describe("Input", () => {
  it("test", async () => {
    const handleBlur = jest.fn();
   
    render(
      <Input data-testid="input" onBlur={handleBlur} />
    );

    const input = screen.getByTestId("input") as HTMLInputElement;

    fireEvent.change(input, { target: { value: "test" } });
    fireEvent.blur(input);

    expect(handleBlur).toHaveBeenCalledTimes(1);
  });
});