使用React Testing Library的userEvent.type时Slate的onChange未触发

API 探路者

2026-7-11

问题：React Testing Library测试Slate编辑器时onChange未触发

使用React Testing Library（RTL）结合Jest测试Slate编辑器，调用userEvent.type模拟用户在编辑器中输入，期望触发Slate的onChange回调，但实际并未生效。该问题仅在测试环境中出现，正常浏览器环境下onChange可以正常触发。

编辑器代码

import React, { useState } from "react";
import { createEditor } from "slate";
import { Slate, Editable, withReact } from "slate-react";

const initialValue = [
  {
    type: "paragraph",
    children: [{ text: "Foo" }]
  }
];

export default function Editor({ onChange }) {
  const [editor] = useState(() => withReact(createEditor()));
  return (
    <Slate onChange={onChange} editor={editor} value={initialValue}>
      <Editable data-testid="my_editor" />
    </Slate>
  );
}

测试代码

import React from "react";
import "@testing-library/jest-dom/extend-expect";
import userEvent from "@testing-library/user-event";
import { render, screen } from "@testing-library/react";
import Editor from "../editor";

test("test", async () => {
  const user = userEvent.setup();
  const onChange = jest.fn();
  render(<Editor onChange={onChange} />);

  expect(screen.getByTestId("my_editor")).toHaveTextContent("Foo");

  user.type(screen.getByTestId("my_editor"), " some more text");

  // 以下尝试均未生效：
  // user.click(screen.getByTestId("my_editor"));
  // user.keyboard("bar");

  // fireEvent.change(screen.getByTestId("my_editor"), {
  //   target: { innerHTML: "<p>hello world</p>" }
  // });

  // fireEvent.blur(screen.getByTestId("my_editor"), {
  //   target: { innerHTML: "<p>hello world</p>" }
  // });

  expect(onChange).toHaveBeenCalled();
});