Angular 6 unit testing component with DomSanitizer dependency

Question

In a unit test to just create (instantiate) a component that has a DomSanitizer dependency, how does one mock / stub this dependency?

Because DomSanitizer is an Abstract class, I have no idea what the method signature of bypassSecurityTrustHtml really looks like.

And if it's not intended to mock / stub DomSanitizer, how should one proceed to inject the actual implementation iso the abstract class?

actual statement in the component looks like:

this.trustedString = <string>this.domSanitizer.bypassSecurityTrustHtml(trustedHTML);

TestBed setup looks like:

beforeEach(async(() => {
  TestBed.configureTestingModule({
    imports: [
      BrowserModule,
      // other modules
    ],
    providers: [
      {
        provide: DomSanitizer,
        useValue: {
          bypassSecurityTrustHtml: () => 'safeString'
        }
      },
      // more providers
    ],
    declarations: [ TheComponent ],
    schemas: [ NO_ERRORS_SCHEMA ]
  })
    .compileComponents();
}));

The specific error that I'm getting in Karma in Chrome (not headless) is this:

TypeError: view.root.sanitizer.sanitize is not a function

error properties: Object({ ngDebugContext: DebugContext_({ view: Object({ def: Object({ factory: Function, nodeFlags: 16793601, rootNodeFlags: 1, nodeMatchedQueries: 0, flags: 0, nodes: [ Object({ nodeIndex: 0, parent: null, renderParent: null, bindingIndex: 0, outputIndex: 0, checkIndex: 0, flags: 1, childFlags: 16793601, directChildFlags: 16777217, childMatchedQueries: 0, matchedQueries: Object({ }), matchedQueryIds: 0, references: Object({ }), ngContentIndex: null, childCount: 5, bindings: [ ], bindingFlags: 0, outputs: [ ], element: Object({ ns: null, name: null, attrs: [ ], template: null, componentProvider: null, componentView: null, componentRendererType: null, publicProviders: null({ }), allProviders: null({ }), handleEvent: Function }), provider: null, text: null, query: null, ngContent: null }), Object({ nodeIndex: 1, parent: Object({ nodeIndex: 0, parent: null, renderParent: null, bindingIndex: 0, outputIndex: 0, checkIndex: 0, flags: 1, childFlags: 16793601, directChildFlags: 16777217 ... at at setElementProperty (webpack:///./node_modules/@angular/core/fesm5/core.js?:8237:61) at checkAndUpdateElementValue (webpack:///./node_modules/@angular/core/fesm5/core.js?:8189:13) at checkAndUpdateElementInline (webpack:///./node_modules/@angular/core/fesm5/core.js?:8136:24) at checkAndUpdateNodeInline (webpack:///./node_modules/@angular/core/fesm5/core.js?:10477:20) at checkAndUpdateNode (webpack:///./node_modules/@angular/core/fesm5/core.js?:10443:16) at debugCheckAndUpdateNode (webpack:///./node_modules/@angular/core/fesm5/core.js?:11076:38) at debugCheckRenderNodeFn (webpack:///./node_modules/@angular/core/fesm5/core.js?:11062:13) at Object.eval [as updateRenderer] (ng:///DynamicTestModule/ConversationMessageComponent.ngfactory.js:84:5) at Object.debugUpdateRenderer [as updateRenderer] (webpack:///./node_modules/@angular/core/fesm5/core.js?:11054:21) at checkAndUpdateView (webpack:///./node_modules/@angular/core/fesm5/core.js?:10430:14)

Answer 1

As a workaround, try add sanitize: () => 'safeString',

...
useValue: {
  sanitize: () => 'safeString',
  bypassSecurityTrustHtml: () => 'safeString'
}
...

Answer 2

If you want to preserve the value, use:

{
  provide: DomSanitizer,
  useValue: {
    sanitize: (ctx: any, val: string) => val,
    bypassSecurityTrustResourceUrl: (val: string) => val,
  },
}