How to use @testing-library/react - 10 common examples

await wait(() => expect(mockReload).toHaveBeenCalledTimes(3));
  expect(mockPut).toHaveBeenCalledTimes(3);
  expect(mockPut.mock.calls[2][0]).toBe('/account/totp');
  expect(mockPut.mock.calls[2][1]).toMatchObject({ enabled: false });

  // Regen TOTP
  fireEvent.click(getByText('Regenerate'));
  await waitForDomChange();
  expect(mockPut).toHaveBeenCalledTimes(4);
  expect(mockPut.mock.calls[3][0]).toBe('/account/totp');
  expect(mockPut.mock.calls[3][1]).toMatchObject({ enabled: true });

  // Delete account
  expect(() => getByText('Are you sure', { exact: false })).toThrow();
  fireEvent.click(getByText('Delete'));
  fireEvent.change(getByLabelText('Confirmation'), {
    target: { value: 'YES' }
  });
  fireEvent.click(getByText('Delete'));
  expect(mockDelete).toHaveBeenCalledTimes(1);
  expect(mockDelete).toHaveBeenCalledWith('/account');
  await wait(() => expect(mockAssign).toHaveBeenCalledTimes(1));
  expect(mockAssign).toHaveBeenCalledWith('def');
});

test('it should not dispatch anything after UI event if not idle first', () => {
      const dispatch = jest.fn();
      const { getByText } = render(
        <div>
          
            Hello
          
        </div>
      );

      // Clearing the _run action
      dispatch.mockClear();
      fireEvent.keyDown(getByText('Hello'), { key: 'Enter', code: 13 });

      expect(dispatch).not.toHaveBeenCalled();
    });

it("should contain focus by wrapping around", () => {
    const { getByTestId } = render();

    const input1 = getByTestId("input-1");
    const input2 = getByTestId("input-2");

    // set up intial focus...
    input1.focus();
    expect(document.activeElement).toBe(input1);

    // start tracking focus changes
    const focus1 = jest.spyOn(input1, "focus");
    const focus2 = jest.spyOn(input2, "focus");

    fireEvent.keyDown(input1, { key: "Tab", shiftKey: true });
    expect(document.activeElement).toBe(input2);
    expect(focus2).toBeCalledTimes(1);

    fireEvent.keyDown(input2, { key: "Tab" });
    expect(document.activeElement).toBe(input1);
    expect(focus1).toBeCalledTimes(1);
  });

it('should throw on invalid arguments', () => {
    // $ExpectError
    fireEvent(1);
    // $ExpectError
    fireEvent(htmlEl, 1);
  });

it('should throw on invalid arguments', () => {
    // $ExpectError
    fireEvent(1);
    // $ExpectError
    fireEvent(htmlEl, 1);
  });

it('orders accounts by date promoted', async () => {
    AccountService.fetchAdminAccounts = jest
      .fn()
      .mockResolvedValueOnce(MOCK_ADMINS)

    const page = renderPage()
    await accountsTestUtils.waitForAccountsToLoad(page)

    // Order ascending
    const table = page.getByTestId(AccountsTable.ACCOUNTS_TABLE_TESTID)
    const dateRegisteredHeader = rtl.getByText(table, 'Date promoted')
    rtl.fireEvent.click(dateRegisteredHeader)

    // Check that first page is correct
    _(MOCK_ADMINS)
      .orderBy(['DatePromoted'], ['asc'])
      .take(AccountsTable.DEFAULT_PAGE_SIZE)
      .forEach(({ EmailAddress }) =>
        accountsTestUtils.expectEmailIn(EmailAddress, table),
      )
  })

// need to set extensionUses to zero so that the delete button is enabled
    const comp = (
      
        
      
    );
    const { getAllByRole, getByText, queryByRole } = render(comp);
    const deleteButton = getByText(deleteLabel);
    expect(deleteButton).not.toHaveAttribute('disabled'); // delete should be enabled

    // click the delete button so that the delete confirmation dialog opens
    fireEvent.click(deleteButton);

    // click the confirmation dialog cancel button and make sure dialog disappears
    const dialog = getAllByRole('dialog')[0];
    fireEvent.click(getDialogButton(dialog, cancelLabel));
    await wait(() => expect(queryByRole('dialog')).toBeNull());
  });
});

// need to set extensionUses to zero so that the delete button is enabled
    const comp = (
      
        
      
    );
    const { getAllByRole, getByText, queryByRole } = render(comp);
    const deleteButton = getByText(deleteText);
    expect(deleteButton).not.toHaveAttribute('disabled'); // delete should be enabled

    // click the delete button so that the delete confirmation dialog opens
    fireEvent.click(deleteButton);

    // click the confirmation dialog cancel button and make sure dialog disappears
    const dialog = getAllByRole('dialog')[0];
    fireEvent.click(getDialogButton(dialog, cancelText));
    await wait(() => expect(queryByRole('dialog')).toBeNull());
  });
});

test('you can mock things with jest.mock', () => {
  render()
  expect(screen.getByText('Hello world')).toBeTruthy() // we just care it exists
  // hide the message
  fireEvent.click(screen.getByText('Toggle'))
  // in the real world, the CSSTransition component would take some time
  // before finishing the animation which would actually hide the message.
  // So we've mocked it out for our tests to make it happen instantly
  expect(screen.queryByText('Hello World')).toBeNull() // we just care it doesn't exist
})

it('should abort when there is a window scroll', () => {
  const { getByText } = render();
  const handle: HTMLElement = getByText('item: 0');

  fireEvent.mouseDown(handle);

  // abort
  const event: Event = new Event('scroll', {
    target: window,
    bubbles: true,
    cancelable: true,
  });
  fireEvent(window, event);

  // would normally start
  fireEvent.mouseMove(handle, {
    clientX: 0,
    clientY: sloppyClickThreshold,
  });

  // event not consumed as it is an indirect cancel