Full DOM rendering test fails at react-quill component.

I’m using react-quill component in my app. Everything works fine except tests. I was writing some unit tests for my components. When I test my App component to simply render the app (using Enzyme’s mount method), it fails rendering Quill component. Here is output:

    Error: Uncaught [ReferenceError: MutationObserver is not defined]
console.error node_modules/react-dom/cjs/react-dom.development.js:15123
    The above error occurred in the <Quill> component:
        in Quill (at board.js:64)
        in div (at board.js:63)
        in div (at board.js:62)
        in div (at board.js:49)
        in Board (created by WrappedBoard)
        in span (created by WrappedBoard)
        in div (created by WrappedBoard)
        in WrappedBoard (at app.js:19)
        in div (at app.js:17)
        in div (at app.js:16)
        in div (at app.js:14)

React-Quill version

1.3.2

To reproduce:

1. Set up React app using create-react-app
2. Add react-quill component
3. Use react-quill component somewhere in your app
4. Add enzyme to your app
5. Write a unit test like this one:

import React from 'react';
import { mount } from 'enzyme';
import App from '../App';
import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

configure({ adapter: new Adapter() });

it('renders without crashing', () => {
  mount(<App />);
});

[adambaialiev]

Hi! I am using Jest and I have setupTests.js file where I put global mocks. This code helped me with the same problem…

global.MutationObserver = class {
  constructor(callback) {}
  disconnect() {}
  observe(element, initObject) {}
  takeRecords() {return []}
};
global.document.getSelection = function() {}

[labkey-nicka]

@lyctw I realize this was awhile ago but did you end up finding a solution for when you have a custom toolbar? I’m also receiving the error of the classList being null.