Custom render wrapper for each component with getters for each input for react-testing-library

customRenderPerComponent.js

import { render as r } from '../test-utils'
function render(ui, options) {
 const utils = r(ui, options)
 return {
   ...utils,
   username: utils.getByLabelText(/username/i),
   password: utils.getByLabelText(/password/i),
   login: utils.getByText(/login/i),
   successModal: () => utils.getByTestId('login-success')
  }
}

A test using the func above:

it('Should let me login given a username and password', () => {
  const auth = { login: jest.fn() }
  const { username, password, login } = render(<Login /> { auth })
  
  fireEvent.change(username, { target: { value: 'john' } })
  fireEvent.change(password, { target: { value: 'sekret' } })
  fireEvent.click(login)
  expect(auth.login).toHaveBeenCalledWith('john', 'sekret')
})