test(angular-query-experimental/injectQueries): switch to fake timers, replace 'setTimeout' with 'sleep', replace 'findByText' with 'getByText', add 'toBeInTheDocument', remove unused 'toString' method, rename '_pushResults' to '_', and add '@testing-library/jest-dom/vitest' (TanStack#9896)

Author: sukvvon

packages/angular-query-experimental/src/__tests__/inject-queries.test.ts

@@ -1,18 +1,19 @@
-import { beforeEach, describe, expect, it } from 'vitest'
-import { render } from '@testing-library/angular'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 import {
   Component,
   effect,
   provideZonelessChangeDetection,
 } from '@angular/core'
 import { TestBed } from '@angular/core/testing'
-import { queryKey } from '@tanstack/query-test-utils'
+import { render } from '@testing-library/angular'
+import { queryKey, sleep } from '@tanstack/query-test-utils'
 import { QueryClient, provideTanStackQuery } from '..'
 import { injectQueries } from '../inject-queries'
 
 let queryClient: QueryClient
 
 beforeEach(() => {
+  vi.useFakeTimers()
   queryClient = new QueryClient()
   TestBed.configureTestingModule({
     providers: [
@@ -22,6 +23,10 @@ beforeEach(() => {
   })
 })
 
+afterEach(() => {
+  vi.useRealTimers()
+})
+
 describe('injectQueries', () => {
   it('should return the correct states', async () => {
     const key1 = queryKey()
@@ -39,37 +44,36 @@ describe('injectQueries', () => {
       `,
     })
     class Page {
-      toString(val: any) {
-        return String(val)
-      }
       result = injectQueries(() => ({
         queries: [
           {
             queryKey: key1,
-            queryFn: async () => {
-              await new Promise((r) => setTimeout(r, 10))
-              return 1
-            },
+            queryFn: () => sleep(10).then(() => 1),
           },
           {
             queryKey: key2,
-            queryFn: async () => {
-              await new Promise((r) => setTimeout(r, 100))
-              return 2
-            },
+            queryFn: () => sleep(100).then(() => 2),
           },
         ],
       }))
 
-      _pushResults = effect(() => {
+      _ = effect(() => {
         const snapshot = this.result().map((q) => ({ data: q.data() }))
         results.push(snapshot)
       })
     }
 
-    const rendered = await render(Page)
+    const rendered = await render(Page, {
+      providers: [
+        provideZonelessChangeDetection(),
+        provideTanStackQuery(queryClient),
+      ],
+    })
+
+    await vi.advanceTimersByTimeAsync(101)
+    rendered.fixture.detectChanges()
 
-    await rendered.findByText('data1: 1, data2: 2')
+    expect(rendered.getByText('data1: 1, data2: 2')).toBeInTheDocument()
 
     expect(results.length).toBe(3)
     expect(results[0]).toMatchObject([{ data: undefined }, { data: undefined }])

packages/angular-query-experimental/test-setup.ts

@@ -1,3 +1,4 @@
+import '@testing-library/jest-dom/vitest'
 import { getTestBed } from '@angular/core/testing'
 import {
   BrowserTestingModule,