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:
- Set up React app using create-react-app
- Add
react-quill
component - Use
react-quill
component somewhere in your app - Add
enzyme
to your app - 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
Hi! I am using Jest and I have setupTests.js file where I put global mocks. This code helped me with the same problem…
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
beingnull
.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