react-testing-library-tips.tsx

import { render, fireEvent, waitForElementToBeRemoved, prettyDOM } from '@testing-library/react';

const { getByText, queryByText } = render(
  <Component />
);

const button = getByText(/Remove [0-9]+ projects? from this migration/);
fireEvent.click(button);

// click the remove project button
fireEvent.click(getByText('Remove project'));
expect(onRemoveProjectSpy).toHaveBeenNthCalledWith(1, ['serverKey']);

// wait for element to be gone
await waitForElementToBeRemoved(() => queryByText(modalText));
expect(queryByText(modalText)).toEqual(null);

// handle react hook using `act()`
const mockSearchText = 'this is a mock search text';
act(() => {
  userEvent.type(getByPlaceholderText('Search for name'), mockSearchText);
});

// find closest node - part of DOM api
expect(queryByText(modalText).closest('button')).toMatchInlineSnapshot(null);

// debugging
console.log(prettyDOM(queryByText(modalText)))