Mounting component in Enzyme throws error

[unaimian]

console.log node_modules/easymde/src/js/easymde.js:1386 EasyMDE: Error. No element was found. console.error node_modules/jsdom/lib/jsdom/virtual-console.js:29 This is what I get when I try to mount the component with SimpleMDE editor.

It works only with shallow but then I can't access nested elements. Anyone knows a solution for this?

[RIP21]

I need to investigate. Will be more than happy to get repro repo or codesandbox.io

[RIP21]

It's been a while :) But with version 5.0.0 it works for sure no problem. But with @testing-library/react Here is how I do it

import {act, render, screen} from "@testing-library/react";
import { useState } from "react";
import { SimpleMdeReact } from "SimpleMdeReact";
import userEvent from "@testing-library/user-event";

// @ts-ignore
Document.prototype.createRange = function () {
  return {
    setEnd: function () {},
    setStart: function () {},
    getBoundingClientRect: function () {
      return { right: 0 };
    },
    getClientRects: function () {
      return {
        length: 0,
        left: 0,
        right: 0,
      };
    },
  };
};

const Editor = () => {
  const [value, setValue] = useState("");
  return <SimpleMdeReact value={value} onChange={setValue} />;
};

describe("Renders", () => {
  it("succesfully", async () => {
    act(() => {
      render(<Editor />);
    });
    const editor = await screen.findByRole("textbox");
    userEvent.type(editor, "hello")
    expect(screen.getByText('hello')).toBeDefined()
  });
});

It requires polyfills so you need to add it. This Document.prototype.createRange = function () { line and onwards