How do you check UI changes after a mutation?

[CLOUDoort]

I mocked the network call for the mutation using MSW and wrote the mutation hook.

// MSW handler
export const notificationDeleteHandler: HttpHandler = http.delete(
  `${API_END_POINT.NOTIFICATION}/:id`,
  ({ params }) => {
    const id = params.id as string;

    const notificationId = parseInt(id, 10);

    notifications = notifications.filter((el) => el.id !== notificationId);

    return HttpResponse.json({ data: notifications, status: 204 });
  },
);

// @/components/notification/queries
export const useDeleteNotification = (): {
  mutate: UseMutateFunction<unknown, Error, number, unknown>;
} => {
  const queryClient = useQueryClient();

  const deleteNotification = async (id: number) => {
    const response = await httpClient.delete(
      `${API_END_POINT.NOTIFICATION}/${id}`,
    );

    return response.data.data;
  };

  const { mutate } = useMutation({
    mutationFn: deleteNotification,
    onSuccess: (data: NotificationType[]) => {
      queryClient.setQueryData([queryKeys.NOTIFICATION], data);
      queryClient.invalidateQueries({ queryKey: [queryKeys.NOTIFICATION] });
    },
  });

  return { mutate };
};

test code

When I clicked the button, the mutation process started.
and I successfully tested that the mutation was executed.

However, I failed to test the UI changes after the mutation.
I confirmed that the UI did not change after the mutation.

Is there a problem with my testing method?

// notifictaion.test.tsx
vi.mock('@/components/notification/queries', () => ({
  useDeleteNotification: vi.fn(),
}));

const mockedDeleteMutate = vi.fn();

vi.mocked(useDeleteNotification).mockReturnValue({
  mutate: mockedDeleteMutate,
});

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      retry: false,
    },
  },
});
const wrapper = ({ children }: { children: ReactNode }) => {
  return (
    <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
  );
};

test('delete notification', async () => {
    render(<Notification />, { wrapper });
    const user = userEvent.setup();

   // I also mocked the API that fetches 6 data items, but I omitted that part in my explanation.
    const notifications = await screen.findAllByRole('figure', {
      name: /notification/,
    });
    expect(notifications).toHaveLength(6);

  // delete_button_1 => notification id is 1
    const button = screen.getByRole('button', { name: /delete_button_1/ });
    await user.click(button);

   // pass
    await waitFor(() => {
      // notification id is 1
      expect(mockedDeleteMutate).toHaveBeenCalledWith(1);
    });
    });

   // not pass
     await waitFor(() => {
       const notifications = await screen.findAllByRole('figure', {
           name: /notification/,
        });
        expect(notifications).toHaveLength(5);
      })

feature code

// Notification.tsx
const Notification = () => {
  const { isLoading, notifications } = useGetNotifications();
  const { mutate } = useDeleteNotification();

  const clickDelete = (id: number) => mutate(id);

  if (isLoading) return <p>Loading...</p>;
  if (!notifications) return <p>Notifications not found</p>;

  return (
    // ...
  );
};

export default Notification;