[英]ngx-quill tests fail when using Angular 10.2 with Jest after upgrade
Upgrading from Angular 9.x to Angular 10.x all the specs of components using the component quill-editor
from ngx-quill
fail to load.使用来自
ngx-quill
quill-editor
从 Angular 9.x 升级到 Angular 10.x 组件的所有规格无法加载。
This is produced by the standard angular test:这是由标准 angular 测试产生的:
it('should create', () => {
expect(component).toBeTruthy();
});
This is the error message they produce:这是他们产生的错误信息:
FAIL my-project src/(...)/my-component.spec.ts
● Test suite failed to run
Call retries were exceeded
at ChildProcessWorker.initialize (node_modules/jest-worker/build/workers/ChildProcessWorker.js:193:21)
This happens whilst our views have a simple quill editor usage:当我们的视图有一个简单的羽毛笔编辑器使用时,就会发生这种情况:
<quill-editor formControlName="myControlName"></quill-editor>
(commenting or removing this line allows the tests to pass) (评论或删除此行允许测试通过)
Previouslly mocking the module quill with a jest.mock
call was enough:以前 mocking 模块 quill 与
jest.mock
调用就足够了:
jest.mock('quill');
but now the tests just fail...但现在测试失败了......
we load the QuillModule
in a shared component and import this shared component as required:我们将
QuillModule
加载到一个共享组件中,并根据需要导入这个共享组件:
@NgModule({
declarations: [],
imports: [
QuillModule.forRoot({
modules: {
toolbar: [
['bold', 'italic', 'underline', 'strike'],
],
},
}),
],
exports: [QuillModule],
})
export class QuillEditorModule {}
We ended up mocking the module QuillEditorModule
with jest in all spec files using our wrapper module:我们使用我们的包装器模块在所有规范文件中开玩笑地结束了 mocking 模块
QuillEditorModule
:
Making sure this comes at the top of the ..spec.ts
file we were able to stub the ngx-quill module and its used component selector "quill-editor", and all the tests passed again:确保这出现在
..spec.ts
文件的顶部,我们能够存根 ngx-quill 模块及其使用的组件选择器“quill-editor”,并且所有测试再次通过:
import { QuillEditorModuleStub } from 'src/(my-app-paths)/quill-editor.module.stub';
jest.mock(`src/(my-app-paths)/quill-editor.module`, () => ({
__esModule: true,
QuillEditorModule: QuillEditorModuleStub,
}));
Stub Component存根组件
import { Component, forwardRef } from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
@Component({
selector: 'quill-editor',
template: '',
providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => QuillEditorComponentStub),
multi: true,
},
],
})
export class QuillEditorComponentStub implements ControlValueAccessor {
registerOnChange(fn: any): void {}
registerOnTouched(fn: any): void {}
writeValue(obj: any): void {}
}
Stub Module:存根模块:
import { NgModule } from '@angular/core';
import { QuillEditorComponentStub } from './quill-editor-component.stub';
@NgModule({
declarations: [QuillEditorComponentStub],
exports: [QuillEditorComponentStub],
})
export class QuillEditorModuleStub {}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.