Angular 2 how to test custom directive on mocked child component

I'm testing a component that uses a custom directive (similar to ngIf). I have mocked the child component however I'm getting the following error:

"message": "An error was thrown in afterAll\nTypeError: Cannot read property 'workInProgressFlag' of undefined\nerror 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: 1, childMatchedQueries: 0, matchedQueries: Object({  }), matchedQueryIds: 0, references: Object({  }), ngContentIndex: null, childCount: 4, bindings: [  ], bindingFlags: 0, outputs: [  ], element: Object({ ns: '', name: 'div', attrs: [ Array ], 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: 1, chil ...\n    at <Jasmine>\n    at WorkInProgressFlagDirective.displayElement (webpack:///./src/app/shared/directives/work-in-progress-flag.directive.ts?:35:42)\n    at WorkInProgressFlagDirective.set [as flagName] (webpack:///./src/app/shared/directives/work-in-progress-flag.directive.ts?:24:22)\n    at updateProp (webpack:///./node_modules/@angular/core/fesm5/core.js?:10575:37)\n    at checkAndUpdateDirectiveInline (webpack:///./node_modules/@angular/core/fesm5/core.js?:10326:19)\n    at checkAndUpdateNodeInline (webpack:///./node_modules/@angular/core/fesm5/core.js?:11635:20)\n    at checkAndUpdateNode (webpack:///./node_modules/@angular/core/fesm5/core.js?:11597:16)\n    at debugCheckAndUpdateNode (webpack:///./node_modules/@angular/core/fesm5/core.js?:12234:38)\n

at debugCheckDirectivesFn (webpack:///./node_modules/@angular/core/fesm5/core.js?:12194:13)\n at Object.eval [as updateDirectives] (ng:///DynamicTestModule/PageActionsComponent.ngfactory.js:20:5)\n at Object.debugUpdateDirectives [as updateDirectives] (webpack:///./node_modules/@angular/core/fesm5/core.js?:12186:21)",

This is how am I setting it up:

      TestBed.configureTestingModule({
        declarations: [
            PageActionsComponent,
            MockComponent({ selector: 'print', template: '<p>print</p>' }),
            WorkInProgressFlagDirective,
        ],
        providers: [
            { provide: ConfigService, useValue: getMockConfigService },
            { provide: TranslationService, useValue: getStubTranslationService({ 'print': 'printText' }) },
        ]
    }).compileComponents();
    fixture = TestBed.createComponent(PageActionsComponent);
    fixture.detectChanges();

Component under test looks like:

<ul>
    <li>
        <print *workInProgressFlag="'print'"></print>
    </li>
</ul>

*workInProgressFlag directive is very similar to *ngIf

Print and component under test do not have any @input and @output.

I tried mocking the workInProgressFlag but result is the same.