title: Mock ViewChild Element in Angular Test (of components in packages)
body: <p>In my component's class, I have <code>ViewChild</code> variables, like so:</p>
  <pre><code>@ViewChild(&quot;chipList&quot;) chipList;
  @ViewChild(&quot;autocompleteChipInput&quot;) autocompleteChipInput: ElementRef&lt;HTMLInputElement&gt;;
  @ViewChild(&quot;autocompleteTrigger&quot;) autocompleteTrigger: MatAutocompleteTrigger;
  </code></pre>
  <p>Here is (some of) the component template:</p>
  <pre><code>&lt;mat-form-field&gt;
     &lt;mat-chip-list #chipList&gt;
        &lt;mat-chip&gt;...&lt;/mat-chip&gt;
        &lt;input matInput #autocompleteChipInput #autocompleteTrigger=&quot;matAutocompleteTrigger&quot; .../&gt;
     &lt;/mat-chip-list&gt;
     &lt;mat-autocomplete #autocompleteChips=&quot;matAutocomplete&quot;&gt;...&lt;/mat-autocomplete&gt;
  &lt;/mat-form-field&gt;
  </code></pre>
  <p>I'm now writing unit tests, and in my class logic I'm using the <code>chipList</code>, <code>autocompleteChipInput</code>, and <code>autocompleteTrigger</code> variables. In my current tests, they're showing as undefined, so I can't trigger certain logic.<br>
  How can I mock out these elements in my tests?
  I've seen lots of examples on how to mock a childComponent, but those components are coming from external packages and I can't figure out how to apply it to them.</p>