packages/react-query/test/setInfiniteQueryData.test.tsx - main - githubmirror/trpc

packages/react-query/test/setInfiniteQueryData.test.tsx
103 строки3 KB
Alex / KATT
chore: remove `waitFor` from testing (#6221)
19 мар 2025, 20:23
19 мар 2025, 20:23b6c6ddb
import { createAppRouter } from './__testHelpers';
import { render } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import React from 'react';

let factory: ReturnType<typeof createAppRouter>;
beforeEach(() => {
  factory = createAppRouter();
});
afterEach(async () => {
  await factory.close();
});

describe('setInfiniteQueryData()', () => {
  test('with & without callback', async () => {
    const { trpc, client, App } = factory;
    function MyComponent() {
      const utils = trpc.useUtils();
      const allPostsQuery = trpc.paginatedPosts.useInfiniteQuery(
        {},
        {
          enabled: false,
          getNextPageParam: (next) => next.nextCursor,
        },
      );
      return (
        <>
          <pre>
            {JSON.stringify(
              allPostsQuery.data?.pages.map((p) => p.items) ?? null,
              null,
              4,
            )}
          </pre>
          <button
            data-testid="setInfiniteQueryData"
            onClick={async () => {
              // Add a new post to the first page (without callback)
              utils.paginatedPosts.setInfiniteData(
                {},
                {
                  pages: [
                    {
                      items: [
                        {
                          id: 'id',
                          title: 'infinitePosts.title1',
                          createdAt: Date.now(),
                        },
                      ],
                      nextCursor: null,
                    },
                  ],
                  pageParams: [],
                },
              );

              const newPost = {
                id: 'id',
                title: 'infinitePosts.title2',
                createdAt: Date.now(),
              };

              // Add a new post to the first page (with callback)
              utils.paginatedPosts.setInfiniteData({}, (data) => {
                expect(data).not.toBe(undefined);

                if (!data) {
                  return {
                    pages: [],
                    pageParams: [],
                  };
                }

                return {
                  ...data,
                  pages: data.pages.map((page) => {
                    return {
                      ...page,
                      items: [...page.items, newPost],
                    };
                  }),
                };
              });
            }}
          />
        </>
      );
    }
    const utils = render(
      <App>
        <MyComponent />
      </App>,
    );

    await userEvent.click(utils.getByTestId('setInfiniteQueryData'));

    await vi.waitFor(() => {
      expect(utils.container).toHaveTextContent('infinitePosts.title1');
      expect(utils.container).toHaveTextContent('infinitePosts.title2');
    });
  });
});