Helper functions and user object

[karlosos]

This is a follow-up question to this one where @ph-fritsche provided a good explanation of when to use user object rather than directly calling userEvent. I am wondering how to approach the problem when there are many helper functions in the codebase that uses userEvent directly. Should we pass user object every time we use such functions?

  it('WHEN filled in form THEN confirm button is enabled', async () => {
    // GIVEN
    const user = userEvent.setup()
    renderComponent();
    
    // WHEN
    await fillPersonSection(user, {name: "Karol", surname: "Dzialowski"}); 
    await user.click(screen.getByText('Verify'));

    // THEN
    await waitFor(() => expect(screen.getByText('Confirm')).toBeEnabled());
  })

  const fillPersonSection = async (user, {name, surname}) => {
    await user.type(screen.getByTestId('name-input'), name)
    await user.type(screen.getByTestId('surname-input'), surname)
  }

It doesn't seem right as we are cluttering parameters. Is there a possibility to define this user object globally somehow?

[ph-fritsche]

Setup functions keep the tests tidy.

import { render, screen } from '@testing-library/react'
import userEvent from '@testing-library/user-event'

type UI = ReturnType<typeof userEvent>['setup']

function setup(jsx) {
  const user = userEvent.setup()
  return {
    user,
    ...render(jsx),
  }
}

function fillPersonSection(this: UI, /*...*/) {
  // ...
}

function setupFormXyz(jsx) {
  const setup = setup(<MyForm>{jsx}</MyForm>)
  return {
    ...setup,
    fillPersonSection: fillPersonSection.bind(user),
  }
}

test('fill form and confirm', async () => {
  const { user, fillPersonSection } = setupFormXyz(<MyPersonInput/>)

  await fillPersonSection(/* ... */)
  await user.click(screen.getByRole('button', {name: 'Verify'}))

  await waitFor(() => expect(screen.getByRole('button', {name: 'Confirm'})).toBeEnabled());
})