React Testing Library - Tips & Tricks

Simulating file upload.js

// Credits to Kent C. Dodds
// Source: https://github.com/testing-library/react-testing-library/issues/93#issuecomment-392126991

test('can select an image and upload will make a request to upload it', async () => {
  const { container, getByLabelText, getByText, getByAltText } = render(
    <ProfilePhoto />,
  )
  const file = new File(['(⌐□_□)'], 'chucknorris.png', { type: 'image/png' })
  const imageInput = getByLabelText('choose image')
  Simulate.change(imageInput, { target: { files: [file] } })

  await wait(() => getByAltText('image-preview'))
  const dataURL = getByAltText('image-preview').src
  expect(dataURL).toMatchSnapshot(
    'data url in the image-preview src for this string: "(⌐□_□)"',
  )

  // ensure the form is submittable
  expect(getByText('Upload Image').type).toBe('submit')

  // submit the form
  Simulate.submit(container.querySelector('form'))
  expect(mockClient.request).toHaveBeenCalledTimes(1)
  expect(mockClient.request).toHaveBeenCalledWith(expect.any(String), {
    dataURL,
  })
})