title: Angular Jest unit test for @ViewChildren
body: <p>I am using Angular for the front end and jest for unit testing. I have the html code like below to create a custom drop down and on Up and Down arrow key press highlight the corresponding values,</p>
  <pre><code>&lt;div #myItems *ngFor=&quot;let dpValue of listValues;let i=index;&quot; (keydown)=&quot;onMenuItemClicked($event, i)&quot; class=&quot;dropDownStyle&quot;&gt; 
  &lt;/div&gt;
  </code></pre>
  <p>in .ts file I have implemented for keypress event, like below,</p>
  <pre><code>@ViewChildren('myItems') items : QueryList&lt;ElementRef&gt;;
  
  onMenuItemClicked(event, index): void {
    if(event.key === 'ArrowUp') {
      const element = this.items.find((element, num) =&gt; num == index-1);
      element.nativeElement.focus();
    } else if(event.key === 'ArrowDown') {
      const element = this.items.find((element, num) =&gt; num == index+1);
      element.nativeElement.focus();
    }
  }
  </code></pre>
  <p>In order to unit test the above code using jest, I tried like below in spec.ts file,</p>
  <pre><code>const element = new ElementRef({nativeElement: null});
  jest.spyon(component.items, 'find').mockReturnValue(element);
  </code></pre>
  <p>I am facing &quot;Cannot spyOn on a primitive value; undefined given&quot;</p>
  <p>How can we unit this the above lines using Jest ?</p>