React-testing-library: Add examples for common third party react components

[mattharrigan]

Please add examples to the documentation for testing UI components which contains common third party components. Specifically I would like to test components using react-select and react-datepicker. I would like to know what the best practices for finding/querying the elements are since I cannot easily add data-testid. Also I struggling to trigger the onChange handlers for those components. If a few examples were added it would be easier to extrapolate to whatever other component one might use. Thank you

[weyert]

@mattharrigan I am using the following for a custom Formik field which leverages react-datepicker so far the code listed below works for me. Feel free to let me know what you think of this @kentcdodds and others whether its worth as an example

import React from 'react'
import userEvent from 'user-event'
import DateField from '../DateField'
import {renderWithFormik} from '../../../renderWithFormik'
import {advanceBy, advanceTo, clear} from 'jest-date-mock'

describe('<DateField />', () => {
  test('ensure the selecting a date returns the expected date', () => {
    advanceTo(new Date(2018, 9, 15, 0, 0, 0))
    const now = Date.now()

    const handleChange = jest.fn().mockImplementation(value => {
      return value
    })
    const {
      container,
      getByPlaceholderText,
      getByText,
      debug,
    } = renderWithFormik(
      <DateField placeholder="Enter date" onChange={handleChange} />,
    )

    const dateInput = getByPlaceholderText('Enter date')
    userEvent.click(dateInput)
    const selectedDateElem = getByText('15')
    userEvent.click(selectedDateElem)
    expect(handleChange).toBeCalledTimes(1)
    expect(handleChange).toBeCalledWith('2018-10-15T00:00:00.000Z')

    clear()
  })

  test('ensure the selected date is marked correctly', () => {
    const handleChange = jest.fn()
    const {
      container,
      getByPlaceholderText,
      queryByText,
      getByText,
      debug,
    } = renderWithFormik(
      <DateField
        placeholder="Enter date"
        value="2018-10-15T00:00:00.000"
        onChange={handleChange}
      />,
    )

    const dateInput = getByPlaceholderText('Enter date')
    expect(dateInput.value).toBe('10/15/2018')
    userEvent.click(dateInput)
    expect(queryByText('October 2018')).not.toBeNull()
    const selectedDateElem = getByText('15')
    expect(selectedDateElem).not.toBeNull()
    expect(selectedDateElem).toHaveClass('react-datepicker__day--selected')
  })
})

[mattharrigan]

I ended up adding the following to __mocks__/react-select.js. It seems to be doing what I want. Does that look ok? Thanks

import React from 'react';

export default function Select(props) {
  const value = props.value ? props.value.value : '';

  return (
    <input
      data-testid={props.testid}
      type="text"
      value={value}
      onChange={e => props.onChange(e.target)}
    />
  );
}

Select.defaultProps = {
  testid: 'mock-select',
};

[weyert]

Feels like you are just replacing the component with an input then you aren't really testing react-select just replacing it. Meaning you aren't testing what the user will see/use

[mattharrigan]

@weyert exactly. I don't want to test react-select. I trust that they already did a good job testing it. I want to test my component which has relect-select components as children. I want to make sure the props are correct and the onChange handler is working.

I also asked a SO question.
https://stackoverflow.com/questions/55575843/how-to-test-react-select-with-react-testing-library

[kentcdodds]

Adding examples is always a welcome activity. That can happen here: https://github.com/kentcdodds/react-testing-library-examples

And you can even contribute to it via codesandbox if you want: https://codesandbox.io/s/github/kentcdodds/react-testing-library-examples

learn more

We're not going to keep an issue open for this because it'll basically live forever. People are welcome to make contributions to the examples at any time.