title: Using @ViewChild { read: ElementRef } of component causes unit test to fail
body: <p>In my component I have a child component that looks like this:</p>
  
  <pre><code>&lt;child-component #childComponent&gt;&lt;/childComponent&gt;
  </code></pre>
  
  <p>In my parent component I then access this child component using @ViewChild and the <code>read</code> parameter to get the ElementRef, and not the component reference. I need the ElementRef to ensure I can get some properties from <code>nativeElement</code> that I need. So it's like this:</p>
  
  <pre><code>export class ParentComponent {
    @ViewChild('childComponent', { read: ElementRef }) public childComponent: ElementRef;
    public position: string;
  
    // some way down the code
    private someMethod() {
      if (this.childComponent.nativeElement.offsetLeft &gt; 500) {
        this.position = 'left';
      } else {
        this.position = 'right';
      }
    }
  }
  </code></pre>
  
  <p>So this works for the application, however I am writing the tests and mocking the child component, like this:</p>
  
  <pre><code>@Component({
    selector: 'child-component',
    template: ''
  })
  class ChildComponentMockComponent {
    private nativeElement = {
      get offsetLeft() {
        return 600
      }
    };
  }
  
  beforeEach(async(() =&gt; TestBed.configureTestingModule({
    imports: [ ... ],
    declarations: [ ParentComponent, ChildComponentMockComponent ],
    providers: [ ... ],
    schemas: [ NO_ERRORS_SCHEMA ]
  }).compileComponents()));
  
  it('should have the correct position, based on position of child-component', () =&gt; {
    spyOn(component, 'someMethod');
    expect(component.someMethod).toHaveBeenCalled();
    expect(component.position).toBe('left');
  });
  </code></pre>
  
  <p>So the test will compile the component, and use the mocked child component values as the proper value and compute the value of <code>this.position</code>, which is then asserted in the test.</p>
  
  <p>However, when the <code>{ read: ElementRef }</code> parameter is set, the mock gets completely ignored by the TestBed, even though it's being added in the declarations array. If I remove <code>{ read: ElementRef }</code>, the mock is used in the test and it passes. But then my application doesn't work, as it is now getting the component reference, where the <code>nativeElement</code> property doesn't exist, rather than the element reference.</p>
  
  <p>So how do I get the ElementRef in my application and then in my test use the mock component?</p>