Модульное тестирование с материалом-интерфейсом / сборщиком

Question

Я использую Material-UI / Picker в своем приложении и хотел бы получить полное покрытие модульных тестов. Я использую и KeyboardDatePicker, и KeyboardTimePicker, чтобы дать пользователям возможность ввести дату и время, если им не нравится использовать средства выбора.

Где я должен объявить «data-testid», чтобы быть в состоянии сделать fireEvent.change или userEvent.type (или что-то еще, если есть другой рекомендуемый способ инициирования события этого типа)?

Я попытался добавить data-testid как часть реквизиты самих сборщиков, как часть inputProps и как часть InputAdornmentProps, но затем, когда я пытаюсь запустить:

fireEvent.change(getByTestId('keyboardtimepicker-testid'), { target: { value: '12:00' } })

и

await userEvent.type(getByTestId('keyboardtimepicker-testid'), '12:00')

оба выдают ошибку.

Если я помещаю data-testid в KeyboardButtonProps, я не вижу ошибки, но функция onChange не срабатывает.

Как мне провести модульное тестирование с компонентами из материалов-интерфейса / сборщика?

Answer 1

Вы можете передать data-testid непосредственно компоненту, но предпочитаете использовать функции доступности компонента для запуска ваших тестов.

<DatePicker data-testid="something" />

Answer 2

Оказывается, я на самом деле использовал InputProps вместо inputProps. Оба являются действительными реквизитами на объекте, но очень разные.