React Query 살펴보기(v3 기준)

import { QueryClient, QueryClientProvider } from "react-query"
import { Posts } from "./Posts"
import "./App.css"

function App() {
	const queryClient = new QueryClient()
	return (
		<QueryClientProvider client={queryClient}>
			<div className="App">
				<h1>Blog Posts</h1>
				<Posts />
			</div>
		</QueryClientProvider>
	)
}

export default App

const { data, isError, error, isLoading } = useQuery("posts", fetchPosts)

if (isLoading) return <div>Loading...</div>
if (isError)
	return (
		<div>
			Error!<h1>{error.toString()}</h1>
		</div>
	)

import { QueryClient, QueryClientProvider } from "react-query"
import { ReactQueryDevtools } from "react-query/devtools"

function App() {
	const queryClient = new QueryClient()
	return (
		<QueryClientProvider client={queryClient}>
			<ReactQueryDevtools />
		</QueryClientProvider>
	)
}

export default App

import { useState } from "react"
import { useQuery } from "react-query"

import { PostDetail } from "./PostDetail"
const maxPostPage = 10

async function fetchPosts(pageNum) {
	const response = await fetch(
		`https://jsonplaceholder.typicode.com/posts?_limit=10&_page=${pageNum}`
	)
	return response.json()
}

export function Posts() {
	const [currentPage, setCurrentPage] = useState(0)
	const [selectedPost, setSelectedPost] = useState(null)

	const { data, isError, error, isLoading } = useQuery(
		["posts", currentPage],
		() => fetchPosts(currentPage),
		{
			staleTime: 2000,
		}
	)

	if (isLoading) return <div>Loading...</div>
	if (isError)
		return (
			<div>
				Error!<h1>{error.toString()}</h1>
			</div>
		)

	return (
		<>
			<ul>
				{data.map(post => (
					<li
						key={post.id}
						className="post-title"
						onClick={() => setSelectedPost(post)}
					>
						{post.title}
					</li>
				))}
			</ul>
			<div className="pages">
				<button
					disabled={currentPage <= 1}
					onClick={() => {
						setCurrentPage(prevValue => prevValue - 1)
					}}
				>
					Previous page
				</button>
				<span>Page {currentPage}</span>
				<button
					disabled={currentPage >= maxPostPage}
					onClick={() => {
						setCurrentPage(prevValue => prevValue + 1)
					}}
				>
					Next page
				</button>
			</div>
			<hr />
			{selectedPost && <PostDetail post={selectedPost} />}
		</>
	)
}

import { useQuery, useQueryClient } from "react-query"

const queryClient = useQueryClient()

useEffect(() => {
	if (currentPage < maxPostPage) {
		const nextPage = currentPage + 1
		queryClient.prefetchQuery(["posts", nextPage], () =>
			fetchPosts(nextPage)
		)
	}
}, [currentPage, queryClient])

import { useQuery, useMutation } from "react-query";

const deleteMutation = useMutation(postId => deletePost(postId));

  if (isLoading) return <div>Loading...</div>;
  if (isError) return <div>Error: {error.toString()}</div>;

return (

<button onClick={() => deleteMutation.mutate(post.id)}>Delete</button>
      {deleteMutation.isError && (
        <p style={{ color: "red" }}>Error: {deleteMutation.error.toString()}</p>
      )}
      {deleteMutation.isLoading && (
        <p style={{ color: "blue" }}>post 삭제 중</p>
      )}
      {deleteMutation.isSuccess && (
        <p style={{ color: "green" }}>post 삭제 성공</p>
      )}
)

{
    "count": 37,
    "next": "http://swapi.dev/api/species/?page=2",
    "previous": null,
    "results": [...]
}

useInfiniteQuery("sw-people", ({ pageParam = defaultUrl }) =>
	fetchURl(pageParam)
)

getNextPageParam: (lastPage) => lastPage.next || undefined,

// lastPage.next는 api 응답 시 받은 데이터 객체에 next라는 다음 url 프로퍼티가 전달되었기 때문에 사용할 수 있다.
// lastPage.next가 falsy면 undefined를 반환한다

import InfiniteScroll from "react-infinite-scroller"
import { Person } from "./Person"
import { useInfiniteQuery } from "react-query"

const initialUrl = "https://swapi.dev/api/people/"
const fetchUrl = async url => {
	const response = await fetch(url)
	return response.json()
}

export function InfinitePeople() {
	// TODO: get data for InfiniteScroll via React Query

	const {
		data,
		fetchNextPage,
		hasNextPage,
		isLoading,
		isError,
		isFetching,
		error,
	} = useInfiniteQuery(
		"sw-people",
		({ pageParam = initialUrl }) => fetchUrl(pageParam),
		{
			getNextPageParam: lastPage => lastPage.next || undefined,
		}
	)

	if (isLoading) return <div className="loading">Loading...</div>
	if (isError) return <div>Error {error.toString()} </div>

	return (
		<>
			{isFetching && <div className="loading">Loading...</div>}
			<InfiniteScroll loadMore={fetchNextPage} hasMore={hasNextPage}>
				{data.pages.map(pageData => {
					return pageData.results.map(person => (
						<Person
							key={person.name}
							name={person.name}
							hairColor={person.hair_color}
							eyeColor={person.eye_color}
						/>
					))
				})}
			</InfiniteScroll>
		</>
	)
}

export function useTreatments(): Treatment[] {
	// TODO: get data from server via useQuery
	const fallback = []
	const { data = fallback } = useQuery(queryKeys.treatments, getTreatments)

	return data
}

// Loading.tsx
import { Spinner, Text } from "@chakra-ui/react"
import { ReactElement } from "react"
import { useIsFetching } from "react-query"

export function Loading(): ReactElement {
	// will use React Query `useIsFetching` to determine whether or not to display
	const isFetching = useIsFetching() // for now, just don't display

	const display = isFetching ? "inherit" : "none"

	return (
		<Spinner
			thickness="4px"
			speed="0.65s"
			emptyColor="olive.200"
			color="olive.800"
			role="status"
			position="fixed"
			zIndex="9999"
			top="50%"
			left="50%"
			transform="translate(-50%, -50%)"
			display={display}
		>
			<Text display="none">Loading...</Text>
		</Spinner>
	)
}

defaultOptions: {
 queries: { useQuery options},
 mutations: { useMutation options}
}

// queryClient.ts
import { createStandaloneToast } from "@chakra-ui/react"
import { QueryClient } from "react-query"

import { theme } from "../theme"

const toast = createStandaloneToast({ theme })

function queryErrorHandler(error: unknown): void {
	// error is type unknown because in js, anything can be an error (e.g. throw(5))
	const id = "react-query-error"
	const title =
		error instanceof Error ? error.message : "error connecting to server"

	// prevent duplicate toasts
	toast.closeAll()
	toast({ id, title, status: "error", variant: "subtle", isClosable: true })
}

export const queryClient = new QueryClient({
	defaultOptions: {
		queries: {
			onError: queryErrorHandler,
		},
	},
})

// prefetch하는 훅
export function usePrefetchTreatments(): void {
	const queryClient = useQueryClient()
	queryClient.prefetchQuery(queryKeys.treatments, getTreatments)
}

// 사용 - Home 에서 prefetch한다
export function Home(): ReactElement {
	usePrefetchTreatments()

	// 생략
}

export function useAppointments(): UseAppointments {
	const currentMonthYear = getMonthYearDetails(dayjs())
	const [monthYear, setMonthYear] = useState(currentMonthYear)
	function updateMonthYear(monthIncrement: number): void {
		setMonthYear(prevData => getNewMonthYear(prevData, monthIncrement))
	}
	const [showAll, setShowAll] = useState(false)

	const queryClient = useQueryClient()

	useEffect(() => {
		const nextMonthYear = getNewMonthYear(monthYear, 1)
		queryClient.prefetchQuery(
			[queryKeys.appointments, nextMonthYear.year, nextMonthYear.month],
			() => getAppointments(nextMonthYear.year, nextMonthYear.month)
		)
	}, [queryClient, monthYear])

	const fallback = {}

	const { data: appointments = fallback } = useQuery(
		[queryKeys.appointments, monthYear.year, monthYear.month],
		() => getAppointments(monthYear.year, monthYear.month)
	)

	return { appointments, monthYear, updateMonthYear, showAll, setShowAll }
}

const selectFn = useCallback(
	data => {
		getAvailableAppointments(data, user)
	},
	[user]
)

const { data: appointments = fallback } = useQuery(
	[queryKeys.appointments, monthYear.year, monthYear.month],
	() => getAppointments(monthYear.year, monthYear.month),
	{
		select: showAll ? undefined : selectFn,
	}
)

const { data = fallback } = useQuery(queryKeys.treatments, getTreatments, {
	staleTime: 600000, // 10 minutes
	cacheTime: 900000, // 15 minutes
	refetchOnMount: false,
	refetchOnWindowFocus: false,
	refetchOnReconnect: false,
})

export const queryClient = new QueryClient({
	defaultOptions: {
		queries: {
			onError: queryErrorHandler,
			staleTime: 600000, // 10 minutes
			cacheTime: 900000, // 15 minutes
			refetchOnMount: false,
			refetchOnWindowFocus: false,
			refetchOnReconnect: false,
		},
	},
})

const { data: appointments = fallback } = useQuery(
	[queryKeys.appointments, monthYear.year, monthYear.month],
	() => getAppointments(monthYear.year, monthYear.month),
	{
		select: showAll ? undefined : selectFn,
		staleTime: 0,
		cacheTime: 300000, // 5 minutes
		refetchOnMount: true,
		refetchOnWindowFocus: true,
		refetchOnReconnect: true,
		refetchInterval: 60000, // 1 minute
	}
)

// auth/useAuth.tsx
import axios, { AxiosResponse } from "axios"

import { User } from "../../../shared/types"
import { axiosInstance } from "../axiosInstance"
import { useCustomToast } from "../components/app/hooks/useCustomToast"
import { useUser } from "../components/user/hooks/useUser"

interface UseAuth {
	signin: (email: string, password: string) => Promise<void>
	signup: (email: string, password: string) => Promise<void>
	signout: () => void
}

type UserResponse = { user: User }
type ErrorResponse = { message: string }
type AuthResponseType = UserResponse | ErrorResponse

export function useAuth(): UseAuth {
	const SERVER_ERROR = "There was an error contacting the server."
	const toast = useCustomToast()
	const { clearUser, updateUser } = useUser()

	async function authServerCall(
		urlEndpoint: string,
		email: string,
		password: string
	): Promise<void> {
		try {
			const {
				data,
				status,
			}: AxiosResponse<AuthResponseType> = await axiosInstance({
				url: urlEndpoint,
				method: "POST",
				data: { email, password },
				headers: { "Content-Type": "application/json" },
			})

			if (status === 400) {
				const title = "message" in data ? data.message : "Unauthorized"
				toast({ title, status: "warning" })
				return
			}

			if ("user" in data && "token" in data.user) {
				toast({
					title: `Logged in as ${data.user.email}`,
					status: "info",
				})

				// update stored user data
				updateUser(data.user)
			}
		} catch (errorResponse) {
			const title =
				axios.isAxiosError(errorResponse) &&
				errorResponse?.response?.data?.message
					? errorResponse?.response?.data?.message
					: SERVER_ERROR
			toast({
				title,
				status: "error",
			})
		}
	}

	async function signin(email: string, password: string): Promise<void> {
		authServerCall("/signin", email, password)
	}
	async function signup(email: string, password: string): Promise<void> {
		authServerCall("/user", email, password)
	}

	function signout(): void {
		// clear user from stored user data
		clearUser()
		toast({
			title: "Logged out!",
			status: "info",
		})
	}

	// Return the user object and auth methods
	return {
		signin,
		signup,
		signout,
	}
}

// components/user/hooks/useUser.ts
import { AxiosResponse } from "axios"
import { useQuery, useQueryClient } from "react-query"

import type { User } from "../../../../../shared/types"
import { axiosInstance, getJWTHeader } from "../../../axiosInstance"
import { queryKeys } from "../../../react-query/constants"
import {
	clearStoredUser,
	getStoredUser,
	setStoredUser,
} from "../../../user-storage"

async function getUser(user: User | null): Promise<User | null> {
	if (!user) return null
	const { data }: AxiosResponse<{ user: User }> = await axiosInstance.get(
		`/user/${user.id}`,
		{
			headers: getJWTHeader(user),
		}
	)
	return data.user
}

interface UseUser {
	user: User | null;
	updateUser: (user: User) => void;
	clearUser: () => void;
}

export function useUser(): UseUser {
	const queryClient = useQueryClient()
	// call useQuery to update user data from server
	const { data: user } = useQuery(queryKeys.user, () => getUser(user), {
		initialData: getStoredUser(),
		onSuccess: (received: User | null) => {
			if (received) {
				setStoredUser(received)
			} else {
				clearStoredUser()
			}
		},
	})

	// meant to be called from useAuth
	function updateUser(newUser: User): void {
		// update the user in the query cache
		// 사용자가 성공적으로 인증할 경우 캐시에 사용자 정보를 업데이트한다
		queryClient.setQueryData(queryKeys.user, newUser)
	}

	// meant to be called from useAuth
	function clearUser() {
		// TODO: reset user to null in query cache
		queryClient.setQueryData(queryKeys.user, null)
	}

	return { user, updateUser, clearUser }
}

// user-storage/index.tsx
import { User } from "../../../shared/types"

const USER_LOCALSTORAGE_KEY = "lazyday_user"

// helper to get user from localstorage
export function getStoredUser(): User | null {
	const storedUser = localStorage.getItem(USER_LOCALSTORAGE_KEY)
	return storedUser ? JSON.parse(storedUser) : null
}

export function setStoredUser(user: User): void {
	localStorage.setItem(USER_LOCALSTORAGE_KEY, JSON.stringify(user))
}

export function clearStoredUser(): void {
	localStorage.removeItem(USER_LOCALSTORAGE_KEY)
}

import dayjs from "dayjs"
import { useQuery } from "react-query"

import type { Appointment, User } from "../../../../../shared/types"
import { axiosInstance, getJWTHeader } from "../../../axiosInstance"
import { queryKeys } from "../../../react-query/constants"
import { useUser } from "./useUser"

// for when we need a query function for useQuery
async function getUserAppointments(
	user: User | null
): Promise<Appointment[] | null> {
	if (!user) return null
	const { data } = await axiosInstance.get(`/user/${user.id}/appointments`, {
		headers: getJWTHeader(user),
	})
	return data.appointments
}

export function useUserAppointments(): Appointment[] {
	// TODO replace with React Query
	const { user } = useUser()

	const fallback: Appointment[] = []
	const { data: userAppointments = fallback } = useQuery(
		"user-appointments",
		() => getUserAppointments(user),
		{ enabled: !!user }
	)
	return userAppointments
}

// useUser
import { AxiosResponse } from "axios"
import { useQuery, useQueryClient } from "react-query"

import type { User } from "../../../../../shared/types"
import { axiosInstance, getJWTHeader } from "../../../axiosInstance"
import { queryKeys } from "../../../react-query/constants"
import {
	clearStoredUser,
	getStoredUser,
	setStoredUser,
} from "../../../user-storage"

async function getUser(user: User | null): Promise<User | null> {
	if (!user) return null
	const { data }: AxiosResponse<{ user: User }> = await axiosInstance.get(
		`/user/${user.id}`,
		{
			headers: getJWTHeader(user),
		}
	)
	return data.user
}

interface UseUser {
	user: User | null;
	updateUser: (user: User) => void;
	clearUser: () => void;
}

export function useUser(): UseUser {
	const queryClient = useQueryClient()
	// call useQuery to update user data from server
	const { data: user } = useQuery(queryKeys.user, () => getUser(user), {
		initialData: getStoredUser(),
		onSuccess: (received: User | null) => {
			if (received) {
				setStoredUser(received)
			} else {
				clearStoredUser()
			}
		},
	})

	// meant to be called from useAuth
	function updateUser(newUser: User): void {
		// update the user in the query cache
		// 사용자가 성공적으로 인증할 경우 캐시에 사용자 정보를 업데이트한다
		queryClient.setQueryData(queryKeys.user, newUser)
	}

	// meant to be called from useAuth
	function clearUser() {
		// reset user to null in query cache
		// queryClient.setQueryData는 onSuccess를 발생시킨다. 이런 이유 때문에 queryKeys.user는 setQueryData를 사용해야 한다
		queryClient.setQueryData(queryKeys.user, null)

		// user-appointment는 로컬스토리지 존재하지 않으므로 위에 onSuccess 옵션을 사용하지 않는다.
		// removeQueries는 onSuccess를 발생시키지 않으나, 해당 query를 삭제할 수 있다.
		queryClient.removeQueries("user-appointments")
	}

	return { user, updateUser, clearUser }
}

async function setAppointmentUser(
	appointment: Appointment,
	userId: number | undefined
): Promise<void> {
	if (!userId) return
	const patchOp = appointment.userId ? "replace" : "add"
	const patchData = [{ op: patchOp, path: "/userId", value: userId }]
	await axiosInstance.patch(`/appointment/${appointment.id}`, {
		data: patchData,
	})
}

export function useReserveAppointment(): UseMutateFunction<
	void,
	unknown,
	Appointment,
	unknown
> {
	const { user } = useUser()
	const toast = useCustomToast()
	const queryClient = useQueryClient()

	const { mutate } = useMutation(
		(appointment: Appointment) => setAppointmentUser(appointment, user?.id),
		{
			onSuccess: () => {
				queryClient.invalidateQueries([queryKeys.appointments])
				toast({
					title: "You have reserved the appointment!",
					status: "success",
				})
			},
		}
	)

	return mutate
}

// meant to be called from useAuth
function clearUser() {
	// reset user to null
	queryClient.setQueryData(queryKeys.user, null)

	// remove user appointments query
	queryClient.removeQueries([queryKeys.appointments, queryKeys.user])
}

// query function
async function getUser(
	user: User | null,
	signal: AbortSignal
): Promise<User | null> {
	if (!user) return null
	const { data }: AxiosResponse<{ user: User }> = await axiosInstance.get(
		`/user/${user.id}`,
		{
			signal, // abortSignal from React Query
			headers: getJWTHeader(user),
		}
	)

	return data.user
}

import jsonpatch from 'fast-json-patch';
import { UseMutateFunction, useMutation, useQueryClient } from 'react-query';

import type { User } from '../../../../../shared/types';
import { axiosInstance, getJWTHeader } from '../../../axiosInstance';
import { queryKeys } from '../../../react-query/constants';
import { useCustomToast } from '../../app/hooks/useCustomToast';
import { useUser } from './useUser';

// for when we need a server function
async function patchUserOnServer(
  newData: User | null,
  originalData: User | null
): Promise<User | null> {
  if (!newData || !originalData) return null;
  // create a patch for the difference between newData and originalData
  const patch = jsonpatch.compare(originalData, newData);

  // send patched data to the server
  const { data } = await axiosInstance.patch(
    `/user/${originalData.id}`,
    { patch },
    {
      headers: getJWTHeader(originalData),
    }
  );
  return data.user;
}

export function usePatchUser(): UseMutateFunction<
  User,
  unknown,
  User,
  unknown
> {
  const { user, updateUser } = useUser();
  const toast = useCustomToast();
  const queryClient = useQueryClient();

  const { mutate: patchUser } = useMutation(
    (newUserData: User) => patchUserOnServer(newUserData, user),
    {
      // onMutate returns context that is passed to onError
      onMutate: async (newData: User | null) => {
        // cancel any outgoing queries for user data, so old server data
        // doesn't overwrite our optimistic update
        queryClient.cancelQueries(queryKeys.user);

        // snapshot of previous user value
        const previousUserData: User = queryClient.getQueryData(queryKeys.user);

        // optimistically update the cache with new user value
        updateUser(newData);

        // return context object with snapshotted value
        return { previousUserData };
      },
      onError: (error, newData, context) => {
        // roll back cache to saved value
        if (context.previousUserData) {
          updateUser(context.previousUserData);
          toast({
            title: 'Update failed; restoring previous values',
            status: 'warning',
          });
        }
      },
      onSuccess: (userData: User | null) => {
        if (user) {
         // updateUser(newData); // 이제 불필요
          toast({
            title: 'User updated!',
            status: 'success',
          });
        }
      },
      onSettled: () => {
        // invalidate user query to make sure we're in sync with server data
        queryClient.invalidateQueries(queryKeys.user);
      },
    }
  );

  return patchUser;
}

npm i msw -D

npm i @testing-library/react -D
npm i jest -D

// test-utils/index.tsx
/* eslint-disable no-console */

import { render, RenderResult } from "@testing-library/react"
import { ReactElement } from "react"
import { QueryClient, QueryClientProvider, setLogger } from "react-query"

import { generateQueryClient } from "../react-query/queryClient"

// suppress errors written to console
setLogger({
	log: console.log,
	warn: console.warn,
	error: () => {
		// swallow the errors
	},
})

// make this a function for unique queryClient per test
const generateTestQueryClient = () => {
	const client = generateQueryClient()
	const options = client.getDefaultOptions()
	options.queries = { ...options.queries, retry: false }
	return client
}

export function renderWithQueryClient(
	ui: ReactElement,
	client?: QueryClient
): RenderResult {
	const queryClient = client ?? generateTestQueryClient()
	return render(
		<QueryClientProvider client={queryClient}>{ui}</QueryClientProvider>
	)
}

// Treatments.test.tsx

import { screen } from "@testing-library/react"

import { renderWithQueryClient } from "../../../test-utils"
import { Treatments } from "../Treatments"

test("renders response from query", async () => {
	renderWithQueryClient(<Treatments />)

	const treatmentTitles = await screen.findAllByRole("heading", {
		name: /massage|facial|scrub/i,
	})
	expect(treatmentTitles).toHaveLength(3)
})

/* eslint-disable no-console */

import { screen } from "@testing-library/react"
import { rest } from "msw"
import { DefaultOptions, setLogger } from "react-query"

import { server } from "../../../mocks/server"
import { defaultQueryClientOptions } from "../../../react-query/queryClient"
import { renderWithQueryClient } from "../../../test-utils"
import { AllStaff } from "../AllStaff"

setLogger({
	log: console.log,
	warn: console.warn,
	error: () => {
		// swallow the errors
	},
})

test("renders response from query", async () => {
	renderWithQueryClient(<AllStaff />)

	const staffNames = await screen.findAllByRole("heading", {
		name: /divya|sandra|michael|mateo/i,
	})
	expect(staffNames).toHaveLength(4)
})

test("handles query error", async () => {
	// (re)set handler to return a 500 error for staff and treatments
	server.resetHandlers(
		rest.get("http://localhost:3030/staff", (req, res, ctx) => {
			return res(ctx.status(500))
		}),
		rest.get("http://localhost:3030/treatments", (req, res, ctx) => {
			return res(ctx.status(500))
		})
	)

	const defaultOptions: DefaultOptions = defaultQueryClientOptions
	if (defaultOptions && defaultOptions.queries)
		defaultOptions.queries.retry = false

	renderWithQueryClient(<AllStaff />)

	// check for the toast alert
	const alertToast = await screen.findByRole("alert")
	expect(alertToast).toHaveTextContent("Request failed with status code 500")
})

// Calendar.test.tsx

/* eslint-disable no-console */
import { screen } from "@testing-library/react"
import { rest } from "msw"

import { server } from "../../../mocks/server"
import { renderWithQueryClient } from "../../../test-utils"
import { Calendar } from "../Calendar"

test("Appointment query error", async () => {
	// (re)set handler to return a 500 error for appointments
	server.resetHandlers(
		rest.get(
			"http://localhost:3030/appointments/:month/:year",
			(req, res, ctx) => {
				return res(ctx.status(500))
			}
		)
	)

	renderWithQueryClient(<Calendar />)

	// check for the toast alert
	const alertToast = await screen.findByRole("alert")
	expect(alertToast).toHaveTextContent("Request failed with status code 500")
})

// appointmentMutation.test.tsx
import {
	fireEvent,
	screen,
	waitForElementToBeRemoved,
} from "@testing-library/react"
import { MemoryRouter } from "react-router-dom"

import { mockUser } from "../../../mocks/mockData"
import { renderWithQueryClient } from "../../../test-utils"
import { Calendar } from "../Calendar"

// mocking useUser to mimic a logged-in user
jest.mock("../../user/hooks/useUser", () => ({
	__esModule: true,
	useUser: () => ({ user: mockUser }),
}))

test("Reserve appointment", async () => {
	renderWithQueryClient(
		<MemoryRouter>
			<Calendar />
		</MemoryRouter>
	)

	// find all the appointments
	const appointments = await screen.findAllByRole("button", {
		name: /\d\d? [ap]m\s+(scrub|facial|massage)/i,
	})

	// click on the first one to reserve
	fireEvent.click(appointments[0])

	// check for the toast alert
	const alertToast = await screen.findByRole("alert")
	expect(alertToast).toHaveTextContent("reserve")

	// close alert to keep state clean and wait for it to disappear
	const alertCloseButton = screen.getByRole("button", { name: "Close" })
	alertCloseButton.click()
	await waitForElementToBeRemoved(alertToast)
})

test("Cancel appointment", async () => {
	renderWithQueryClient(
		<MemoryRouter>
			<Calendar />
		</MemoryRouter>
	)

	// find all the cancel buttons
	const cancelButtons = await screen.findAllByRole("button", {
		name: /cancel appointment/i,
	})
	ㅃㅂ

	// click on the first one to cancel
	fireEvent.click(cancelButtons[0])

	// check for the toast alert
	const alertToast = await screen.findByRole("alert")
	expect(alertToast).toHaveTextContent("cancel")

	// close alert to keep state clean and wait for it to disappear
	const alertCloseButton = screen.getByRole("button", { name: "Close" })
	alertCloseButton.click()
	await waitForElementToBeRemoved(alertToast)
})

<IconButton
	aria-label="cancel appointment"
	onClick={() => {
		cancelAppointment(appointment)
	}}
	icon={<ImCancelCircle />}
/>

npm i @testing-library/react-hooks -D

// test-utils/index.tsx

// from https://tkdodo.eu/blog/testing-react-query#for-custom-hooks
export const createQueryClientWrapper = (): React.FC => {
	const queryClient = generateTestQueryClient()
	return ({ children }) => (
		<QueryClientProvider client={queryClient}>
			{children}
		</QueryClientProvider>
	)
}

//useAppointments.tsx
import { act, renderHook } from "@testing-library/react-hooks"

import { createQueryClientWrapper } from "../../../test-utils"
import { useAppointments } from "../hooks/useAppointments"
import { AppointmentDateMap } from "../types"

const getAppointmentCount = (appointments: AppointmentDateMap) =>
	Object.values(appointments).reduce(
		(runningCount, appointmentsOnDate) =>
			runningCount + appointmentsOnDate.length,
		0
	)

test("filter appointments by availability", async () => {
	const { result, waitFor } = renderHook(() => useAppointments(), {
		wrapper: createQueryClientWrapper(),
	})

	await waitFor(() => getAppointmentCount(result.current.appointments) > 0)

	const filteredAppointmentLength = getAppointmentCount(
		result.current.appointments
	)

	act(() => result.current.setShowAll(true))

	await waitFor(() => {
		return (
			getAppointmentCount(result.current.appointments) >
			filteredAppointmentLength
		)
	})
})