react-quill: 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 />);
});

About this issue

  • Original URL
  • State: closed
  • Created 6 years ago
  • Reactions: 2
  • Comments: 16

Most upvoted comments

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() {}

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() {}

Thank you but it cause another error, anyone know how to solve it?

TypeError: Cannot read property 'classList' of null

I’m using custom html toolbar btw.

Has anyone been able to solve it? I also have the following error:

Uncaught TypeError: Cannot read properties of null (reading 'innerHTML')

@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.

You need a MutationObserver polyfill - Jest’s JSDOM env is old to maintain Node 4 support.

You can install this or poyfill manually: https://github.com/ianschmitz/jest-environment-jsdom-fourteen

You may also need other polyfills depending on the environment - see the tests for this library itself: https://github.com/zenoamaro/react-quill/tree/master/test/polyfills