ngx-quill and Quill resize module breaking Jasmine tests

Question

I am using ngx-quill with the image-resize-module and have it working in my app

import Quill from 'quill';
import ImageResize from 'quill-image-resize-module';
Quill.register('modules/imageResize', ImageResize);

export class MyComponent {

  quillModules = {
    imageResize: {},
    toolbar: [
      ...
    ],
  };
}

And in my angular.json I have added quill.js to the scripts in both build and test

"scripts": [
  "node_modules/quill/dist/quill.min.js",
]

My test file is importing QuillModule

beforeEach(async(() => {
  TestBed.configureTestingModule({
    imports: [
      QuillModule,
      ...
    ],

However, in my jasmine tests, I am getting this warning

'quill', 'Overwriting modules/imageResize with', function t(e){ ... }

and this error

{
  "message": "An error was thrown in afterAll\n[object ErrorEvent]",
  "str": "An error was thrown in afterAll\n[object ErrorEvent]"
}

This is breaking my whole test runner, it only runs about 40 tests before throwing this error. I narrowed it down to registering the imageResize module in my component

Quill.register('modules/imageResize', ImageResize);

If I remove this line, my tests work again.

Edit

I have found a fix and added the answer

score 1 · Answer 1 · answered Nov 14 '19 at 17:34

I stumbled across a fix after reading this github post

Instead of importing Quill I imported QuillNameSpace and defined Quill as QuillNameSpace.

import * as QuillNamespace from 'quill';
import ImageResize from 'quill-image-resize-module';
const Quill: any = QuillNamespace;
Quill.register('modules/imageResize', ImageResize);

ngx-quill and Quill resize module breaking Jasmine tests

Edit

1 Answers1