Skip to content

Instantly share code, notes, and snippets.

@coryhouse
Created March 29, 2019 17:33
Show Gist options
  • Save coryhouse/5103e68609ce251578ecc4adf20a0558 to your computer and use it in GitHub Desktop.
Save coryhouse/5103e68609ce251578ecc4adf20a0558 to your computer and use it in GitHub Desktop.
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
Copy link
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