Search code examples
angulartesting-libraryangular-testing-library

Angular-testing-library - my test is not failing when expect wrong values


I am using angular-testing-library for my component testing. when expect for fail, after setting the value, my test case not failing. any one help me? (title,newTitle - @inputs)

import { render, screen } from '@testing-library/angular';
import userEvent from "@testing-library/user-event";
import { UserViewComponent } from './user-view.component';
import { provideMockStore } from "@ngrx/store/testing";
import { RouterTestingModule } from '@angular/router/testing';
import { ShellUserViewComponent } from '../../containers/shell-user-view/shell-user-view.component';
import { of } from 'rxjs';


describe('ShellUserViewComponent', () => {

  beforeEach(async () => {
    await render(ShellUserViewComponent, {
      componentProperties: {
        title: "welcome to Chennai",
        newTitle: "new title for test",
        users$: of([])
      },
      imports: [RouterTestingModule],
      declarations: [UserViewComponent],
      providers: [provideMockStore({})]
    });
  })

  it('should find the welcome as title', () => {
    expect(screen.findByText(/welcome to Chennaicc/i)).toBeTruthy(); //not failing cc added
    expect(screen.findByText(/new title for testx/i)).toBeTruthy(); //not failing x added
  });

});

Solution

  • findBy is async, so you need to await it

     it('should find the welcome as title', async () => {
        expect(await screen.findByText(/welcome to Chennaicc/i)).toBeTruthy(); //not failing cc added
        expect(await screen.findByText(/new title for testx/i)).toBeTruthy(); //not failing x added
      });