Test angular component with pipe

Question

I try to test a component but with cutom pipe in template

component.html :

<ul class="test">
    <li class="test1">{{'LABEL_TEST_PIPE' | translateLabels }}</li>
</ul>

component.spec.ts

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

  beforeEach(async () => {
    TestBed.configureTestingModule({
      declarations: [ Component ],
      imports: [ TranslateLabelsPipe ]
    });

  });

  test('should be translate', () => {
    fixture = TestBed.createComponent(Component);
    const component = fixture.componentInstance;
    fixture.detectChanges();
    const element = fixture.debugElement;
    expect(element.nativeElement.querySelector('li').textContent).toContain('test pipe translate');
  });
});

I have this in my terminal :

Test Suites: 0 failed, 0 of 1 total
Tests:       0 total
Snapshots:   0 total
Time:        284 s

I have to stop it with Ctrl+C otherwise it never stops... When I remove the pipe, my test works and stops itself. I tried to mock it but it doesn't work neither.

Someone has any idea ?

Thanks

Answer 1

You can mock the pipe using this methodology: https://stackoverflow.com/a/41826482/7365461 but your main issue is that you put the pipe in imports array instead of declarations .

Try moving the pipe to declarations array.

Answer 2

thanks for your answer.

When I move the pipe in declarations array, I have the same issue, the test never stops.

I have a lot of components in my app, I can't mock pipe for every test.

There must be some way to integrate or import a custom pipe... :/