0

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.

Chris
  • 3
  • 1
  • I can see [in github](https://github.com/jsdom/jsdom/blob/20.0.3/lib/jsdom/living/mutation-observer/MutationObserver-impl.js) that the jsdom 20.0.3 implementation of MutationObserver does have the takeRecords method, so idk what is going on – Chris Aug 04 '23 at 20:58
  • Ok SO, it turns out we did have a file in our repo that overwrites some global variables in the test context, and one of them was MutationObserver, and the overwritten class does not have the takeRecords method – Chris Aug 07 '23 at 18:27

0 Answers0