How can I solve/suppress IntelliJ warning that mock class is not declared in any Angular module?

Question

I have an Angular 8 app where I am trying to mock some sub components.

The mocking itself is fine. However, for the sake of organization and reusability, I want to move the mocks out of the .spec file and into its own mock directory as shown below:

myApp
|-- src
    |-- app
        |-- app.component.spec.ts
    |-- mocks
        |-- material
            |-- mat-drawer-container.ts

The mock for MaterialDrawerContainer looks like this:

import {Component, Input} from '@angular/core';

@Component({
   selector: 'mat-drawer-container',
   template: ''
})

export class MockMatDrawerContainer {
@Input() mode;
}

The test itself still works as expected. But annoyingly, there's a big old red line underneath MockMatDrawerContainer complaining that "MockMatDrawerContainer is not declared in any angular module" even though it is used in the testbed configure test module like so:

TestBed.configureTestingModule(
            {declarations: [MockMatDrawerContainer]}).compileComponents;

I have found the Stack Overflow suggestions for "Compile on changes" and related changes to tsconfig.app.json for compileOnSave, but nothing helps except to create a bogus ngModule in the mock directory, which seems silly.

How can I fix this?

Answer 1

Go to Preferences → Editor → Inspections → Missing or invalid component, directive, or pipe.

While the above is technically correct, it still felt hacky as these inspections are put there for a reason.

A better way to implement a testing library for reuse can be found here.