Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Custom render wrapper for each component with getters for each input for react-testing-library
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')
}
}
@coryhouse

This comment has been minimized.

Copy link
Owner Author

coryhouse commented Mar 29, 2019

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')
})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.