How to use @testing-library/user-event - 9 common examples

test("when the label is clicked it focuses the input", () => {
  const labelText = "label text";
  const { container, getByLabelText } = render();

  // Use `throw` so TypeScript knows `label` is not null
  const label = container.querySelector("label");
  if (!label) throw new Error("Could not find label");

  const input = getByLabelText(labelText);
  expect(input).not.toHaveFocus();

  userEvent.click(label);
  expect(input).toHaveFocus();
});

test('entering an invalid value shows an error message', () => {
  const {getByLabelText, getByRole, queryByRole, rerender} = render(
    ,
  )
  const input = getByLabelText(/favorite number/i)
  user.type(input, '10')
  expect(getByRole('alert')).toHaveTextContent(/the number is invalid/i)
  rerender()
  expect(queryByRole('alert')).toBeNull()
})

test('Can fill out a form across multiple pages', async () => {
  mockSubmitForm.mockResolvedValueOnce({success: true})
  const testData = {food: 'test food', drink: 'test drink'}
  const {findByLabelText, findByText} = render()

  user.click(await findByText(/fill.*form/i))

  user.type(await findByLabelText(/food/i), testData.food)
  user.click(await findByText(/next/i))

  user.type(await findByLabelText(/drink/i), testData.drink)
  user.click(await findByText(/review/i))

  expect(await findByLabelText(/food/i)).toHaveTextContent(testData.food)
  expect(await findByLabelText(/drink/i)).toHaveTextContent(testData.drink)

  user.click(await findByText(/confirm/i, {selector: 'button'}))

  expect(mockSubmitForm).toHaveBeenCalledWith(testData)
  expect(mockSubmitForm).toHaveBeenCalledTimes(1)

  user.click(await findByText(/home/i))

  expect(await findByText(/welcome home/i)).toBeInTheDocument()
})

test('Can fill out a form across multiple pages', async () => {
  mockSubmitForm.mockResolvedValueOnce({success: true})
  const testData = {food: 'test food', drink: 'test drink'}
  const {findByLabelText, findByText} = render()

  user.click(await findByText(/fill.*form/i))

  user.type(await findByLabelText(/food/i), testData.food)
  user.click(await findByText(/next/i))

  user.type(await findByLabelText(/drink/i), testData.drink)
  user.click(await findByText(/review/i))

  expect(await findByLabelText(/food/i)).toHaveTextContent(testData.food)
  expect(await findByLabelText(/drink/i)).toHaveTextContent(testData.drink)

  user.click(await findByText(/confirm/i, {selector: 'button'}))

  expect(mockSubmitForm).toHaveBeenCalledWith(testData)
  expect(mockSubmitForm).toHaveBeenCalledTimes(1)

  user.click(await findByText(/home/i))

  expect(await findByText(/welcome home/i)).toBeInTheDocument()

test('Can fill out a form across multiple pages', async () => {
  mockSubmitForm.mockResolvedValueOnce({success: true})
  const testData = {food: 'test food', drink: 'test drink'}
  const {findByLabelText, findByText} = render()

  user.click(await findByText(/fill.*form/i))

  user.type(await findByLabelText(/food/i), testData.food)
  user.click(await findByText(/next/i))

  user.type(await findByLabelText(/drink/i), testData.drink)
  user.click(await findByText(/review/i))

  expect(await findByLabelText(/food/i)).toHaveTextContent(testData.food)
  expect(await findByLabelText(/drink/i)).toHaveTextContent(testData.drink)

  user.click(await findByText(/confirm/i, {selector: 'button'}))

  expect(mockSubmitForm).toHaveBeenCalledWith(testData)
  expect(mockSubmitForm).toHaveBeenCalledTimes(1)

  user.click(await findByText(/home/i))

  expect(await findByText(/welcome home/i)).toBeInTheDocument()
})

const fillBid = (incentiveId: string, bid: { choiceId?: string; amount?: number; custom?: string }) => {
    fireEvent.click(rendered.getByTestId(`incentiveform-incentive-${incentiveId}`));
    if (bid.amount != null) {
      fillField(/Amount to put towards incentive/i, bid.amount.toString());
    }

    if (bid.custom != null) {
      const customOption = rendered.getByTestId('incentiveBidNewOption');
      fireEvent.click(customOption);
      const customInput = rendered.getByTestId('incentiveBidCustomOption');
      userEvent.type(customInput, bid.custom);
    }
  };

const fillField = (fieldLabel: string | RegExp, value: string) => {
    const input = rendered.getByLabelText(fieldLabel);
    userEvent.type(input, value);
  };

test("when disabled, does not accept input", async () => {
  const textInput = "this is text i typed";
  const inputLabel = "label";
  const { getByLabelText, queryByText } = render(
    
  );

  const input = getByLabelText(inputLabel);
  await userEvent.type(input, textInput);

  expect(queryByText(textInput)).not.toBeInTheDocument();
});

onFocus={onFocus}
    />
  );

  const input = getByTestId("input");

  expect(onBlur).not.toHaveBeenCalled();
  expect(onChange).not.toHaveBeenCalled();
  expect(onFocus).not.toHaveBeenCalled();

  input.focus();
  expect(onBlur).not.toHaveBeenCalled();
  expect(onChange).not.toHaveBeenCalled();
  expect(onFocus).toHaveBeenCalled();

  await userEvent.type(input, "test");
  expect(onBlur).not.toHaveBeenCalled();
  expect(onChange).toHaveBeenCalled();

  input.blur();
  expect(onBlur).toHaveBeenCalled();
});