two form tests using fake data and a data builder utility method. one using faker, another with test-data-bot which provides more utility.

formWithFaker.test.jsx

import * as React from 'react';
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import Login from '../../components/login';
// https://github.com/marak/Faker.js/
import faker from 'faker';

function buildLoginFormFakeData(overrides) {
  return {
    username: faker.internet.userName(),
    password: faker.internet.password(),
    ...overrides,
  };
}

test('submitting the form calls onSubmit with username and password', () => {
  const fake = buildLoginFormFakeData({ password: 'abc' });
  const handleSubmitMock = jest.fn();
  console.log(fake.username);
  console.log(fake.password);

  render(<Login onSubmit={handleSubmitMock} />);

  const username = screen.getByRole('textbox', { name: /username/i });
  const password = screen.getByLabelText(/password/i);
  const submit = screen.getByRole('button', { name: /submit/i });

  userEvent.type(username, fake.username);
  userEvent.type(password, fake.password);
  userEvent.click(submit);

  expect(handleSubmitMock).toHaveBeenCalledWith({
    username: fake.username,
    password: fake.password,
  });
  expect(handleSubmitMock).toHaveBeenCalledTimes(1);
});

formWithTestDataBot.test.jsx

import * as React from 'react';
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import Login from '../../components/login';
// https://www.npmjs.com/package/@jackfranklin/test-data-bot
import { build, fake } from '@jackfranklin/test-data-bot';

function loginFormDataFactory(overrides) {
  return {
    build: build({
      fields: {
        username: fake((f) => f.internet.userName()),
        password: fake((f) => f.internet.password()),
      },
    })({ overrides }),
  };
}

test('submitting the form calls onSubmit with username and password', () => {
  const fake = loginFormDataBuilder({ password: 'abc' }).build;
  const handleSubmitMock = jest.fn();
  console.log(fake.username);
  console.log(fake.password);

  render(<Login onSubmit={handleSubmitMock} />);

  const username = screen.getByRole('textbox', { name: /username/i });
  const password = screen.getByLabelText(/password/i);
  const submit = screen.getByRole('button', { name: /submit/i });

  userEvent.type(username, fake.username);
  userEvent.type(password, fake.password);
  userEvent.click(submit);

  expect(handleSubmitMock).toHaveBeenCalledWith({
    username: fake.username,
    password: fake.password,
  });
  expect(handleSubmitMock).toHaveBeenCalledTimes(1);
});