I'm trying to encourage frontend unit testing and have been having a great time with testing-library/react.
We just got a KendoReact license for the Editor component. I'm trying to just render it in a "hello world" test and I'm getting this.observer.takeRecords is not a function from the prosemirror-view dependency.
observer in that context is a new window.MutationObserver(...)
My testEnvironment is "jsdom" and I have jsdom v20.0.3
I can see in the debugger that there is a window.MutationObserver in this environment, but the instantiated object only has the methods disconnect and observe
My component code right now is just:
export default function RichTextEditor({defaultContent}) {
const ref = useRef();
return (
<Editor
ref={ref}
tools={[
[Undo, Redo],
[AlignLeft, AlignCenter, AlignRight, AlignJustify],
FontName,
FontSize,
[Bold, Italic, Underline, Strikethrough],
[OrderedList, UnorderedList],
ForeColor,
]}
// contentStyle={{height: 120, width: '100%', margin: '0px', padding: '0px'}}
defaultContent={defaultContent}
/>
);
}
and my test is:
describe('<RichTextEditor>', () => {
it('renders default content', () => {
render(<RichTextEditor defaultContent="Hello world" />);
screen.logTestingPlaygroundURL();
expect(screen.getByText('Hello world')).toBeInTheDocument();
});
});
My initial Big Brain idea was to do beforeEach(() => { window.MutationObserver = null }) because I saw the DOMObserver class won't try to instantiate it's observer if that's falsy, but it seems like that breaks something because the editor buttons get rendered, but no content.
I've also tried @sheerun/mutationobserver-shim which gives the same takeRecords is not a function error and mutationobserver-shim was equally unhelpful.