@testing-library/react#queries TypeScript Examples

The following examples show how to use @testing-library/react#queries. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: test-utils.tsx    From abacus with GNU General Public License v2.0 7 votes vote down vote up 
render: typeof actualRender = <Q extends Queries>(ui: React.ReactElement, options?: RenderOptions<Q>) =>
  actualRender(
    (
      <StaticRouter>
        <ThemeProvider>{ui}</ThemeProvider>
      </StaticRouter>
    ) as React.ReactElement,
    options,
  ) as ReturnType<typeof actualRender>
Example #2
Source File: test-utils.ts    From excalidraw with MIT License 7 votes vote down vote up 
renderApp: TestRenderFn = async (ui, options) => {
  if (options?.localStorageData) {
    initLocalStorage(options.localStorageData);
    delete options.localStorageData;
  }

  const renderResult = render(ui, {
    queries: customQueries,
    ...options,
  });

  GlobalTestState.renderResult = renderResult;

  Object.defineProperty(GlobalTestState, "canvas", {
    // must be a getter because at the time of ExcalidrawApp render the
    // child App component isn't likely mounted yet (and thus canvas not
    // present in DOM)
    get() {
      return renderResult.container.querySelector("canvas")!;
    },
  });

  await waitFor(() => {
    const canvas = renderResult.container.querySelector("canvas");
    if (!canvas) {
      throw new Error("not initialized yet");
    }
  });

  return renderResult;
}
Example #3
Source File: renderWithTheme.tsx    From chroma-react with MIT License 6 votes vote down vote up 
export function renderWithTheme<Q extends Queries>(
  ui: React.ReactElement<any>,
  options?: RenderOptions<Q> | Omit<RenderOptions, 'queries'>
) {
  const { rerender, ...result } = render(
    <ThemeProvider theme={theme}>{ui}</ThemeProvider>,
    options
  );

  const wrappedRerender = (ui: React.ReactElement<any>) =>
    rerender(<ThemeProvider theme={theme}>{ui}</ThemeProvider>);

  return {
    ...result,
    rerender: wrappedRerender,
  };
}
Example #4
Source File: test-utils.ts    From excalidraw with MIT License 6 votes vote down vote up 
customQueries = {
  ...queries,
  ...toolQueries,
}
Example #5
Source File: test-utils.ts    From excalidraw-embed with MIT License 6 votes vote down vote up 
customQueries = {
  ...queries,
  ...toolQueries,
}
Example #6
Source File: test-utils.ts    From excalidraw-embed with MIT License 6 votes vote down vote up 
renderApp: TestRenderFn = (ui, options) =>
  render(ui, {
    queries: customQueries,
    ...options,
  })
Example #7
Source File: Bookings.test.tsx    From office-booker with MIT License 6 votes vote down vote up 
test('Can cancel booking', async () => {
  const office = createFakeOffice();
  const user = createFakeSystemAdminUser([office]);
  const booking = createFakeBooking({ office, user: '[email protected]' });
  const deleteReq = jest.fn();
  server.use(
    mockGetOffices([office]),
    mockGetBookings([booking]),
    rest.delete(`/api/bookings/:bookingId`, (req, res, ctx) => {
      deleteReq({ bookingId: req.params.bookingId, user: req.url.searchParams.get('user') });
      return res(ctx.status(200));
    })
  );
  render(
    <TestContext user={user}>
      <Bookings />
    </TestContext>
  );

  const cancelButton = await screen.findByRole('button', { name: 'Cancel' });
  fireEvent.click(cancelButton);

  const dialog = await screen.findByRole('dialog');
  queries.getByText(dialog, 'Are you sure you want to cancel this booking?');
  fireEvent.click(queries.getByRole(dialog, 'button', { name: 'Yes' }));

  await screen.findByText('Booking cancelled');
  expect(deleteReq).toHaveBeenCalledWith({ bookingId: booking.id, user: booking.user });
});
Example #8
Source File: Auth.test.tsx    From office-booker with MIT License 6 votes vote down vote up 
test('Logging in', async () => {
  server.use(
    mockGetConfig(createFakeConfig()),
    mockPostUser(),
    mockGetUser(createFakeUser({ email: '[email protected]' }))
  );
  render(
    <TestContext>
      <RequireLogin>
        <h2>Logged in</h2>
      </RequireLogin>
    </TestContext>
  );

  const verifyButton = await screen.findByRole('button', { name: /send code/i });
  fireEvent.click(verifyButton);

  const alert = await screen.findByRole('alert');
  await queries.findByText(alert, 'Email address not permitted');

  const emailField = screen.getByLabelText(/Email Address/i);
  fireEvent.change(emailField, { target: { value: '[email protected]' } });
  fireEvent.click(verifyButton);

  await screen.findByRole('heading', { name: /Verify/i });
  const codeField = screen.getByLabelText(/code/i);
  fireEvent.change(codeField, { target: { value: '123456' } });
  const submitButton = screen.getByRole('button', { name: /log in/i });
  fireEvent.click(submitButton);

  await screen.findByRole('heading', { name: /logged in/i });
});
Example #9
Source File: toolQueries.ts    From excalidraw with MIT License 5 votes vote down vote up 
_getAllByToolName = (container: HTMLElement, tool: string) => {
  const toolTitle = toolMap[tool as ToolName];
  return queries.getAllByTestId(container, toolTitle);
}
Example #10
Source File: toolQueries.ts    From excalidraw-embed with MIT License 5 votes vote down vote up 
_getAllByToolName = (container: HTMLElement, tool: string) => {
  const toolTitle = toolMap[tool as ToolName];
  return queries.getAllByTestId(container, toolTitle);
}