title: What can be the reason for the error with render2 dependency injection?
body: <p>I get the error below, for angular attribute testing when running<code>ng test</code>.</p>
  <pre class="lang-sh prettyprint-override"><code>No captured browser, open http://localhost:9876/
  03 01 2021 19:23:43.285:INFO [karma-server]: Karma v5.0.9 server started at http://0.0.0.0:9876/
  03 01 2021 19:23:43.286:INFO [launcher]: Launching browsers Chrome with concurrency unlimited
  03 01 2021 19:23:43.289:INFO [launcher]: Starting browser Chrome
  ERROR in src/app/directives/highlight.directive.spec.ts:8:23 - error TS2554: Expected 2 arguments, but got 0.
  8     const directive = new HighlightDirective();
                          ~~~~~~~~~~~~~~~~~~~~~~~~
  src/app/directives/highlight.directive.ts:8:15
  8   constructor(private renderer: Renderer2,
                      ~~~~~~~~~~~~~~~~~~~~~~~~~~~
  An argument for 'renderer' was not provided.
  03 01 2021 19:23:48.538:INFO [Chrome 87.0.4280.88 (Linux x86_64)]: Connected on socket Me54exbEfYncHxGgAAAA with id 64136440
  Chrome 87.0.4280.88 (Linux x86_64): Executed 0 of 0 SUCCESS (0.032 secs / 0 secs)
  TOTAL: 0 SUCCESS
  TOTAL: 0 SUCCESS
  </code></pre>
  <p><strong>highlight.directive.ts</strong></p>
  <pre><code>import { Directive, ElementRef, Renderer2, HostListener } from '@angular/core';
  
      @Directive({
        selector: '[appHighlight]'
      })
      export class HighlightDirective {
  
        constructor(private renderer: Renderer2,
                    private el: ElementRef) { }
  
        // tslint:disable-next-line: typedef
        @HostListener('mouseenter') onMouseEnter()  {
          this.renderer.addClass(this.el.nativeElement, 'hightlight');
        }
        // tslint:disable-next-line: typedef
        @HostListener('mouseleave') onMouseLeave()  {
          this.renderer.removeClass(this.el.nativeElement, 'hightlight');
        }
  
      }
  </code></pre>
  <p><strong>highlight.directive.spec.ts</strong></p>
  <pre><code>
  /* tslint:disable:no-unused-variable */
  
      import { TestBed, async } from '@angular/core/testing';
      import { HighlightDirective } from './highlight.directive';
  
      describe('Directive: Highlight', () =&gt; {
        it('should create an instance', () =&gt; {
          const directive = new HighlightDirective();
          expect(directive).toBeTruthy();
        });
      });
  </code></pre>
  <p>I'm using,</p>
  <ul>
  <li>Angular@10.2.2</li>
  <li>Angular-cli@10.2.0.</li>
  </ul>
  <p>After <code>ng test</code>, the karma opens a chrome browser window which turns out to be completely blank.</p>
  <p>What can be the issue ?</p>