@testing-library/react#findByText TypeScript Examples

test('It should handle change', async () => {
  defaultProps.submitChange = jest.fn()
  const handleChange = defaultProps.submitChange
  const screen = render(<AsyncDualSelectWidget {...(defaultProps as any)} />)
  await waitFor(() => screen.findByText('test'))
  const testOption = screen.getByText('test')
  const selectButton = screen.getByText('SELECT')
  fireEvent.click(testOption)
  fireEvent.click(selectButton)
  expect(handleChange).toBeCalled()
})

test('It should move the item from the left list to the right list', async () => {
  const screen = render(<AsyncDualSelectWidget {...(defaultProps as any)} />)

  await waitFor(() => screen.findByText('test'))

  const leftList = screen.queryByTestId('ds-left-list')
  await waitFor(() => findByText(leftList as HTMLElement, 'test'))
  expect(leftList?.textContent).toContain('test')

  const testOption = screen.getByText('test')
  const selectButton = screen.getByText('SELECT')
  fireEvent.click(testOption)
  fireEvent.click(selectButton)

  const rightList = screen.queryByTestId('ds-right-list')
  expect(getByText(rightList as HTMLElement, 'test')).not.toBeNull()
  expect(queryByText(leftList as HTMLElement, 'test')).toBeNull()
})

it('should update feed item on subscription message', async () => {
  renderComponent([
    createFeedMock({
      pageInfo: defaultFeedPage.pageInfo,
      edges: [defaultFeedPage.edges[0]],
    }),
  ]);
  await screen.findByTestId('adItem');
  await waitFor(async () => {
    const [el] = await screen.findAllByLabelText('Upvote');
    // eslint-disable-next-line testing-library/no-node-access, testing-library/prefer-screen-queries
    expect(await findByText(el.parentElement, '5')).toBeInTheDocument();
  });
  nextCallback({
    postsEngaged: {
      id: defaultFeedPage.edges[0].node.id,
      numUpvotes: 6,
      numComments: 7,
    },
  });
  await waitFor(async () => {
    const [el] = await screen.findAllByLabelText('Upvote');
    // eslint-disable-next-line testing-library/no-node-access, testing-library/prefer-screen-queries
    expect(await findByText(el.parentElement, '6')).toBeInTheDocument();
  });
});

it('should report broken link', async () => {
  let mutationCalled = false;
  renderComponent([
    createFeedMock({
      pageInfo: defaultFeedPage.pageInfo,
      edges: [defaultFeedPage.edges[0]],
    }),
    {
      request: {
        query: REPORT_POST_MUTATION,
        variables: { id: '4f354bb73009e4adfa5dbcbf9b3c4ebf', reason: 'BROKEN' },
      },
      result: () => {
        mutationCalled = true;
        return { data: { _: true } };
      },
    },
  ]);
  const [menuBtn] = await screen.findAllByLabelText('Options');
  menuBtn.click();
  const contextBtn = await screen.findByText('Report');
  contextBtn.click();
  const brokenLinkBtn = await screen.findByText('Broken link');
  brokenLinkBtn.click();
  const submitBtn = await screen.findByText('Submit report');
  submitBtn.click();
  await waitFor(() => expect(mutationCalled).toBeTruthy());
  await waitFor(() =>
    expect(
      screen.queryByTitle('Eminem Quotes Generator - Simple PHP RESTful API'),
    ).not.toBeInTheDocument(),
  );
  await screen.findByRole('alert');
  const feed = await screen.findByTestId('posts-feed');
  expect(feed).toHaveAttribute('aria-live', 'assertive');
});

it('should report nsfw', async () => {
  let mutationCalled = false;
  renderComponent([
    createFeedMock({
      pageInfo: defaultFeedPage.pageInfo,
      edges: [defaultFeedPage.edges[0]],
    }),
    {
      request: {
        query: REPORT_POST_MUTATION,
        variables: { id: '4f354bb73009e4adfa5dbcbf9b3c4ebf', reason: 'NSFW' },
      },
      result: () => {
        mutationCalled = true;
        return { data: { _: true } };
      },
    },
  ]);
  const [menuBtn] = await screen.findAllByLabelText('Options');
  menuBtn.click();
  const contextBtn = await screen.findByText('Report');
  contextBtn.click();
  const brokenLinkBtn = await screen.findByText('NSFW');
  brokenLinkBtn.click();
  const submitBtn = await screen.findByText('Submit report');
  submitBtn.click();
  await waitFor(() => expect(mutationCalled).toBeTruthy());
  await waitFor(() =>
    expect(
      screen.queryByTitle('Eminem Quotes Generator - Simple PHP RESTful API'),
    ).not.toBeInTheDocument(),
  );
  await screen.findByRole('alert');
  const feed = await screen.findByTestId('posts-feed');
  expect(feed).toHaveAttribute('aria-live', 'assertive');
});

it('should hide post', async () => {
  let mutationCalled = false;
  renderComponent([
    createFeedMock({
      pageInfo: defaultFeedPage.pageInfo,
      edges: [defaultFeedPage.edges[0]],
    }),
    {
      request: {
        query: HIDE_POST_MUTATION,
        variables: { id: '4f354bb73009e4adfa5dbcbf9b3c4ebf' },
      },
      result: () => {
        mutationCalled = true;
        return { data: { _: true } };
      },
    },
  ]);
  const [menuBtn] = await screen.findAllByLabelText('Options');
  menuBtn.click();
  const contextBtn = await screen.findByText('Hide');
  contextBtn.click();
  await waitFor(() => expect(mutationCalled).toBeTruthy());
  await waitFor(() =>
    expect(
      screen.queryByTitle('Eminem Quotes Generator - Simple PHP RESTful API'),
    ).not.toBeInTheDocument(),
  );
});

it('should block a source', async () => {
  let mutationCalled = false;
  renderComponent([
    createFeedMock({
      pageInfo: defaultFeedPage.pageInfo,
      edges: [defaultFeedPage.edges[0]],
    }),
    createTagsSettingsMock(),
    {
      request: {
        query: ADD_FILTERS_TO_FEED_MUTATION,
        variables: { filters: { excludeSources: ['echojs'] } },
      },
      result: () => {
        mutationCalled = true;
        return { data: { _: true } };
      },
    },
  ]);
  await waitFor(async () => {
    const data = await queryClient.getQueryData(
      getFeedSettingsQueryKey(defaultUser),
    );
    expect(data).toBeTruthy();
  });
  const [menuBtn] = await screen.findAllByLabelText('Options');
  menuBtn.click();
  const contextBtn = await screen.findByText(
    "Don't show articles from Echo JS",
  );
  contextBtn.click();
  await waitFor(() => expect(mutationCalled).toBeTruthy());
  await screen.findByRole('alert');
  const feed = await screen.findByTestId('posts-feed');
  expect(feed).toHaveAttribute('aria-live', 'assertive');
});

it('should block a tag', async () => {
  let mutationCalled = false;
  renderComponent([
    createFeedMock({
      pageInfo: defaultFeedPage.pageInfo,
      edges: [defaultFeedPage.edges[0]],
    }),
    createTagsSettingsMock(),
    {
      request: {
        query: ADD_FILTERS_TO_FEED_MUTATION,
        variables: { filters: { blockedTags: ['javascript'] } },
      },
      result: () => {
        mutationCalled = true;
        return { data: { _: true } };
      },
    },
  ]);
  await waitFor(async () => {
    const data = await queryClient.getQueryData(
      getFeedSettingsQueryKey(defaultUser),
    );
    expect(data).toBeTruthy();
  });
  const [menuBtn] = await screen.findAllByLabelText('Options');
  menuBtn.click();
  const contextBtn = await screen.findByText('Not interested in #javascript');
  contextBtn.click();
  await waitFor(() => expect(mutationCalled).toBeTruthy());
  await screen.findByRole('alert');
  const feed = await screen.findByTestId('posts-feed');
  expect(feed).toHaveAttribute('aria-live', 'assertive');
});

test('It should render values from server', async () => {
  const screen = render(<AsyncDualSelectWidget {...(defaultProps as any)} />)
  await waitFor(() => screen.findByText('test'))
  expect(screen.getByText('test')).toBeDefined()
  expect(screen.getByText('peretest')).toBeDefined()
})

it('should send comment through the comment popup', async () => {
  let mutationCalled = false;
  const newComment = {
    __typename: 'Comment',
    id: '4f354bb73009e4adfa5dbcbf9b3c4ebf',
    content: 'comment',
    createdAt: new Date(2017, 1, 10, 0, 1).toISOString(),
    permalink: 'https://daily.dev',
  };
  renderComponent([
    createFeedMock({
      pageInfo: defaultFeedPage.pageInfo,
      edges: [defaultFeedPage.edges[0]],
    }),
    {
      request: {
        query: UPVOTE_MUTATION,
        variables: { id: '4f354bb73009e4adfa5dbcbf9b3c4ebf' },
      },
      result: () => {
        return { data: { _: true } };
      },
    },
    {
      request: {
        query: COMMENT_ON_POST_MUTATION,
        variables: {
          id: '4f354bb73009e4adfa5dbcbf9b3c4ebf',
          content: 'comment',
        },
      },
      result: () => {
        mutationCalled = true;
        return {
          data: {
            comment: newComment,
          },
        };
      },
    },
  ]);
  const [upvoteBtn] = await screen.findAllByLabelText('Upvote');
  upvoteBtn.click();
  const input = (await screen.findByRole('textbox')) as HTMLTextAreaElement;
  fireEvent.change(input, { target: { value: 'comment' } });
  const commentBtn = await screen.findByText('Comment');
  commentBtn.click();
  await waitFor(() => expect(mutationCalled).toBeTruthy());
  await waitFor(async () =>
    expect(screen.queryByRole('textbox')).not.toBeInTheDocument(),
  );
});

it('should report broken link with comment', async () => {
  let mutationCalled = false;
  renderComponent([
    createFeedMock({
      pageInfo: defaultFeedPage.pageInfo,
      edges: [defaultFeedPage.edges[0]],
    }),
    {
      request: {
        query: REPORT_POST_MUTATION,
        variables: {
          id: '4f354bb73009e4adfa5dbcbf9b3c4ebf',
          reason: 'BROKEN',
          comment: 'comment',
        },
      },
      result: () => {
        mutationCalled = true;
        return { data: { _: true } };
      },
    },
  ]);
  const [menuBtn] = await screen.findAllByLabelText('Options');
  menuBtn.click();
  const contextBtn = await screen.findByText('Report');
  contextBtn.click();
  const brokenLinkBtn = await screen.findByText('Broken link');
  brokenLinkBtn.click();
  const input = (await screen.findByRole('textbox')) as HTMLTextAreaElement;
  fireEvent.change(input, { target: { value: 'comment' } });
  const submitBtn = await screen.findByText('Submit report');
  submitBtn.click();
  await waitFor(() => expect(mutationCalled).toBeTruthy());
  await waitFor(() =>
    expect(
      screen.queryByTitle('Eminem Quotes Generator - Simple PHP RESTful API'),
    ).not.toBeInTheDocument(),
  );
  await screen.findByRole('alert');
  const feed = await screen.findByTestId('posts-feed');
  expect(feed).toHaveAttribute('aria-live', 'assertive');
});