1 year ago

#316454

test-img

303

Error: Timeout - Async function did not complete within 5000ms although test function is not async

I am writing Angular 13 component tests. When starting the test suite in watch mode, it always runs flawlessly the first time. But from the second time on, all my integrated tests consistently fail with an error like the following.

1) displays two columns
     TableComponent Integrated tests desktop one column with data display of type regular
     Error: Timeout - Async function did not complete within 5000ms (set by jasmine.DEFAULT_TIMEOUT_INTERVAL)
    at <Jasmine>

But the test is not async. Here is the test code:

@Component({
  selector: 'app-test-host',
  template: '<app-table [data]="data" [config]="config"></app-table>',
})
class TestHostComponent {
  data: Array<Record<string, unknown>>
  config: TableConfig<Record<string, unknown>>
}

describe('TableComponent', () => {
  let testHostComponentFixture: ComponentFixture<TestHostComponent>
  let testHostComponent: TestHostComponent

  let tableComponentFixture: ComponentFixture<TableComponent<Record<string, unknown>>>
  let tableComponent: TableComponent<Record<string, unknown>>

  const setupDependencies = async (dependencies: Partial<TestModuleMetadata>) => {
    await TestBed.configureTestingModule({
      declarations: dependencies.declarations,
      imports: dependencies.imports,
      schemas: dependencies.schemas,
      providers: [TableComponent],
    }).compileComponents()
  }

  // [...] Isolated tests

  describe('Integrated tests', () => {
    beforeEach(async () => {
      await setupDependencies({
        imports: [InlineSVGModule, HttpClientModule],
        declarations: [TestHostComponent, TableComponent, CoIconComponent],
      })
    })

    describe('desktop', () => {
      describe('one column with data display of type regular', () => {
        beforeEach(async () => {
          testHostComponentFixture = TestBed.createComponent(TestHostComponent)
          testHostComponent = testHostComponentFixture.componentInstance

          testHostComponent.config = [
            {
              columnName: 'Lorem',
              columnType: 'data',
              alignment: 'left',
              dataDisplayType: 'regular',
              dataId: 'lorem',
            },
          ]
          testHostComponent.data = [{ lorem: 'ipsum' }, { lorem: 'dolor' }, { lorem: 'sit' }, { lorem: 'amet' }]

          testHostComponentFixture.detectChanges()
          await testHostComponentFixture.whenStable()
        })

        it('displays two columns', () => {
          const columns = testHostComponentFixture.debugElement.queryAll(By.css('tr:nth-child(1) td'))
          expect(columns.length).toEqual(2)
        })
      })
    })
  })
})

When having more tests in the Integrated tests suite, all of them fail but only after a first successful run. It doesn't seem to matter, what I test in there. Isolated tests and tests in other files are unaffected.

I tried destroying the fixture in an afterEach hook but it didn't solve the problem. I am at a loss.

angular

jasmine

angular-test

0 Answers

Your Answer

Accepted video resources