title: Angular's TestBed overrideComponent not working
body: <p>I have an Angular directive that shows the element if the user has the appropriate permission. I want to test this using Jest.</p>
  
  <p>I would like to change the template of the mock component for each test; one test with a valid permission and another test with an invalid permission. </p>
  
  <p>I am trying to use the <code>overrideComponent</code> method to override the template for each test, but it is not working at all. </p>
  
  <p>This is the spec file:</p>
  
  <pre><code>@Component({
    template: `&lt;div&gt;&lt;/div&gt;`
  })
  class TestDirectiveComponent {}
  
  describe('Directive: pbmHasPermission', () =&gt; {
    let component: TestDirectiveComponent;
    let fixture: ComponentFixture&lt;TestDirectiveComponent&gt;;
  
    const mockAuthService = {
      getPermissions: jest
        .fn()
        .mockReturnValue([{ name: 'read_protocol' }, { name: 'add_protocol' }, { name: 'delete_protocol' }])
    };
  
    beforeEach(async(() =&gt; {
      TestBed.configureTestingModule({
        declarations: [TestDirectiveComponent, HasPermissionDirective],
        providers: [
          {
            provide: AuthService,
            useValue: mockAuthService
          }
        ]
      }).compileComponents();
    }));
  
    it('should show the element', () =&gt; {
      const template = `&lt;button type="button" *pbmHasPermission="'add_protocol'"&gt;Add protocol&lt;/button&gt;`;
      TestBed.overrideComponent(TestDirectiveComponent, { set: { template: template } });
      fixture = TestBed.createComponent(TestDirectiveComponent);
      fixture.detectChanges();
      component = fixture.componentInstance;
      expect(component).toBeTruthy();
      console.log(fixture.nativeElement.innerHTML); // prints &lt;div&gt;&lt;/div&gt; instead of the new template
    });
  });
  </code></pre>
  
  <p>I tried many variations (using <code>overrideTemplate</code>, compiling the components, using <code>then</code> to execute after it...), which would only make reading the question more difficult, so I am willing to try everything you suggest, even if I already tried.</p>
  
  <p>I am using Angular 8 and Jest 24. </p>
  
  <p>Is it come kind of configuration problem? Is it because I use Jest? Am I doing something wrong?</p>