Argument of type 'By' is not assignable to parameter of type 'Predicate<DebugElement>'

Question

I'm experimenting with Protractor (5.4.2) and trying to test my Angular component. I created the following test, inspired by the Unit testing in Angular course from Joe Eames.

The (working) example from the course

My (faulty) code

import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { DetailsComponent } from './details.component';
import { By } from 'protractor';

describe('DetailsComponent', () => {
    let fixture: ComponentFixture<DetailsComponent>;

    beforeEach(async(() => {
        TestBed.configureTestingModule({
            declarations: [DetailsComponent]
        })
            .compileComponents();
    }));

    beforeEach(() => {
        fixture = TestBed.createComponent(DetailsComponent);

        fixture.detectChanges();
    });

     it('contains 3 titles', () => {
        expect(fixture.debugElement.queryAll(By.css('.card-title')).length).toBe(3);
    });
});

However, the following type error occurres in the .query invocation in the test method:

Argument of type 'By' is not assignable to parameter of type 'Predicate'.

I don't understand why this error occurs as my code looks similair to the example.

Answer 1

This error occurred because you imported By from the protractor instead of the @angular/platform-browser module.

Change this import { By } from 'protractor'; to the import { By } from '@angular/platform-browser';