How to test PlateJs Marks with React Testing Library

I can't seem to be able to make this work.

My Editor:

const editor = usePlateEditor({
  plugins: [...BasicMarksKit, PlainTextPastePlugin],
  value: initialValue,
});
<Plate editor={editor} onValueChange={saveContent}>
<RichTextControls />
<EditorContainer onKeyDown={onKeyDown}>
<Editor
id={fieldId}
data-testid={testId}
readOnly={disabled}
minHeight={minHeight}
hasError={hasError}
/>
</EditorContainer>
</Plate>

The controls:

export function MarkToolbarButton({
  nodeType,
  text,
}: {
  nodeType: string;
  text: string;
}) {
  const state = useMarkToolbarButtonState({ nodeType });
  const {
    props: { pressed, onClick },
  } = useMarkToolbarButton(state);
  return (
    <Button
      data-testid={`submit-button-${nodeType}-${pressed ? "enabled" : "disabled"}`}
      isActive={pressed}
      onClick={onClick}
      {...commonStyle}
    >
      {text}
    </Button>
  );
}
export const RichTextControls: React.FC = () => (
<Flex direction="row" gap="8px" width="100%" justifyContent="end">
{["B", "I", "U"].map((text: string, index: number) => (
<MarkToolbarButton key={index} nodeType={MarkType[text]} text={text} />
))}
</Flex>
);

I would like to test the interaction with these buttons. My test looks like:

const clickApplyMarkButton = async (nodeType: string) => {
  const editorContainer = screen.getByTestId("plate-editor-test");
  const button = screen.getByTestId(`submit-button-${nodeType}-disabled`);
  await userEvent.click(editorContainer);
  await userEvent.click(button);
};
const checkApplyMarkButton = (nodeType: string) => {
const button = screen.getByTestId(submit-button-${nodeType}-enabled);
expect(button).toBeInTheDocument();
};
describe("RichTextArea Unit Tests, layout and rendering", () => {
it.skip("should apply underlined mark correctly", async () => {
render(<RichTextAreaComponent {...props} />);
await clickApplyMarkButton(nodeType.underlined);
await waitFor(() => {
checkApplyMarkButton(nodeType.underlined);
[nodeType.bold, nodeType.italic].forEach(checkNotApplyMarkButton);
});
});
});

By debugging, I can confirm that onClick() is actually called, which should, trigger a rerender. That rerender does not take place, and my tests fail. I have tried everything you can think of.

• getBy / queryBy / findBy

• waitFor / act

• userEvent / fireEvent

• dynamic key on button

• pass the editor down to the button and use editor.api.hasMark()

Nothing works. Under the hood, useMarkToolbarButtonState simply invokes editor.api.hasMark(nodeType), which I have also tested, but within the context of my tests, returns falsey.

No idea! Is the reference to the editor lost somehow?