Testing Library and Tanstack Query

Example.stories.tsx

import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import React from 'react'
import type { Meta, StoryObj } from '@storybook/react'

import { Example } from './Example'

const meta: Meta<typeof Example> = {
  title: 'Example',
  component: Example,
  tags: ['autodocs'],
  decorators: [
    (StoryFn) => {
      const queryClient = new QueryClient({
        defaultOptions: {
          queries: {
            cacheTime: 0,
            staleTime: 0,
            retry: false,
          },
        },
      })
      return (
        <QueryClientProvider client={queryClient}>
          {StoryFn()}
        </QueryClientProvider>
      )
    },
  ],
}

export default meta
type Story = StoryObj<typeof Example>

export const IsLoading: Story = {
  render: ({ ...props }) => <Example scenario="loading" />,
}

export const Success: Story = {
  render: ({ ...props }) => <Example scenario="success" />,
}

Example.test.tsx

import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import { screen, render, waitFor } from '@testing-library/react'
import { PropsWithChildren } from 'react'
import { expect, describe, it } from 'vitest'
import { Example } from './Example'

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      cacheTime: 0,
      staleTime: 0,
      retry: false,
    },
  },
})

const AllTheProviders = ({ children }: PropsWithChildren) => {
  return (
    <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
  )
}

describe('Example', () => {
  it('Load Complete', async () => {
    render(<Example scenario="success" />, { wrapper: AllTheProviders })
    expect(screen.queryByText('Loading')).toBeInTheDocument()
    await waitFor(() => {
      expect(screen.queryByText('Loading')).not.toBeInTheDocument()
      expect(screen.queryByText('todo-1')).toBeInTheDocument()
    })
  })

  it('Is Loading', async () => {
    render(<Example scenario="success" />, { wrapper: AllTheProviders })
    await waitFor(() => {
      expect(screen.queryByLabelText('loading')).toBeInTheDocument()
      expect(screen.queryByLabelText('todo-1')).not.toBeInTheDocument()
    })
  })
})

Example.tsx

import { useQuery } from '@tanstack/react-query'
const awaitTimeout = (delay: number) =>
  new Promise((resolve) => setTimeout(resolve, delay))
export const Example = ({ scenario }: { scenario: 'loading' | 'success' }) => {
  const query = useQuery({
    queryKey: ['example', scenario],
    queryFn: async (data) => {
      if (data.queryKey.includes('loading')) {
        return awaitTimeout(1000)
      }
      await awaitTimeout(200)
      return {
        userId: 1,
        id: 1,
        title: 'todo-1',
        completed: false,
      }
    },
  })
  if (query.isLoading) {
    return <div>Loading</div>
  }
  if (query.isError) {
    return <div aria-label="error">Error</div>
  }
  if (query.isSuccess && query.data) {
    return <div aria-label="todo-1">{query.data?.title}</div>
  }
  return <div aria-label="unknown">Unknown Issue</div>
}