How to test with React Testing Library?

[MateusFP95]

That's actually not a issue, but I didn't find any doc on internet.

How to test with React Testing Library?

How can I simulate a user input on a field?

ReactQuill version

• [ ] master
• [ ] v2.0.0-beta.2
• [ ] v2.0.0-beta.1
• [ x ] 1.3.5
• [ ] 1.3.4 or older
• [ ] Other (fork)

[alexkrolick]

JSDOM doesn't implement all the DOM events and layout stuff you need to test this library fully. A full browser environment is recommended. The Quill tests are in Selenium and React-Quill uses Cypress. See https://github.com/zenoamaro/react-quill/blob/master/test/index.spec.js

You may be able to simulate basic stuff with RTL in JSDOM by firing change events on the content-editable .ql-editor

[tgfischer]

You should be able to use @testing-library/user-event to simulate the user typing into the .ql-editor.

For example, a test I've written that does this looks something like this

import { render } from "@testing-library/react";
import userEvent from "@testing-library/user-event";

...

it("should type something into the editor, and verify the content is saved", () => {
  const { container } = render(<Editor ... />);

  // This might look a bit different if you use `userEvent.setup`
  // https://testing-library.com/docs/user-event/setup#starting-a-session-per-setup
  userEvent.type(container.querySelector(".ql-editor")!, "Hello, World!");

  // Trigger some sort of event to save the notepad content
  userEvent.click(screen.getByRole("button", { name: "Save" }));

  // Assert the request was made. You should be able to verify the content contains `Hello, World!` now
});

[Hari-Krishna-B]

The above solution throws TypeError: Cannot read property 'rangeCount' of undefined. Any lead on this?

[incepter]

Testing with vitest , testing-library and happy-dom makes the test hang forever

[HugoPoi]

I confirm what @incepter said, there is some infinite loop when Quill is loaded in HappyDom, but it works with JSDom.

[RichMatthews]

Any movement on this??