how can I test a component with a query using spectator?

[enolive]

We are starting using @ngneat/query in our customer project.

Unfortunately, I can't get a working setup for my tests when using spectator. The fetched result never appears.

When I log the rendered HTML, I can see that the list containing my fetched elements never appears

app.component.html

<h1>Hello, {{ title }}!</h1>

@if (todosQuery$ | async; as todos) {
  @if (todos.isFetched) {
    <ul>

      @for (todo of todos.data; track todo.id) {
        <li>{{ todo.title }}</li>
      }
    </ul>
  }
}

app.component.ts

import { Component, inject } from '@angular/core'
import { RouterOutlet } from '@angular/router'
import { HttpClient, HttpClientModule } from '@angular/common/http'
import { AsyncPipe } from '@angular/common'
import { injectQuery } from '@ngneat/query'

type Todo = {
  userId: number
  id: number
  title: string
  completed: boolean
}

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterOutlet, HttpClientModule, AsyncPipe],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css',
})
export class AppComponent {
  title = 'Todos'
  #http = inject(HttpClient)
  #query = injectQuery()
  todosQuery$ = this.#query({
    queryKey: ['todos'],
    queryFn: () => this.fetchComments(),
  }).result$

  private fetchComments() {
    return this.#http.get<Todo[]>('https://jsonplaceholder.typicode.com/todos')
  }
}

app.component.spec.ts

import { AppComponent } from './app.component'
import { byRole, createComponentFactory } from '@ngneat/spectator/jest'

describe('AppComponent', () => {
  const createComponent = createComponentFactory(AppComponent)

  it('renders component', async () => {
    const spectator = createComponent()

    // enabling this triggers a jest timeout
    // await spectator.fixture.whenStable()

    const title = spectator.query(byRole('heading'))
    expect(title).toHaveText('Hello, Todos!')
    const list = spectator.query(byRole('list'))
    expect(list).toExist()
    const items = spectator.queryAll(byRole('listitem'))
    expect(items).not.toHaveLength(0)
  })
})

What I tried so far:

• using detectChanges, detectComponentChanges, fixture.whenStable, no success
• using fakeAsync, tick, and flush at the right places. Works, but looks clumsy

I've uploaded the complete project to GitHub.

https://github.com/enolive/query-testing/tree/spectator

as a side node, when using @testing-library/angular instead of spectator, everything works fine (which is in the main branch of the project).

what am I doing wrong?

[NetanelBasal]

You don't mock the http response?

[enolive]

I don't see any roles in the template

the roles are implicit as suggested here: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/list_role#best_practices

[luii]

Regarding the sync response I need to check. It seems like there it's always returns the pending status from the query

And this is to my knowledge totally normal, first a synchronous result is returned where it's pending, until the request is finished this wont change. After a result was returned it should send a second response, with pending/loading to false and either an error or some data.

Regarding the flush and tick this is likely due to having a garbage collector inside @tanstack/query (which uses setTimeout) and if this message queue doesnt gets flushed it will error that a macroTask/timer is still in queue

[luii]

Regarding the flush and tick this is likely due to having a garbage collector inside @tanstack/query (which uses setTimeout)

This also will hinder the test from becoming stable, because whenStable() requires the task queue (macro and micro Tasks) to be flushed out of the event loop.
#154 (reply in thread)
What maybe could help here, would be to use fake timers but i haven't tested that. @enolive maybe you could try this out in your reproduction repo?

[NetanelBasal]

Regarding the flush and tick this is likely due to having a garbage collector inside @tanstack/query

That's correct and was my assumption but in the testing library example there is no flush call and he said that it works, so I need to check why.

[enolive]

This also will hinder the test from becoming stable, because whenStable() requires the task queue (macro and micro Tasks) to be flushed out of the event loop. #154 (reply in thread) What maybe could help here, would be to use fake timers but i haven't tested that. @enolive maybe you could try this out in your reproduction repo?

thanks for the suggestion! I tried it out (directly in the test) and see no improvement. I still get a jest timeout

it('renders component', async () => {
    jest.useFakeTimers()

    fetchComments.mockReturnValue(of(todos))

    const spectator = createComponent()

    // does not help! I'll get a jest timeout when enabling this
    await spectator.fixture.whenStable()
    ...

did I make a mistake?