Тестирование Material-UI Textfield выбора компонента с помощью шутки

Question

Я пытаюсь написать тест для простого Материал-Пользовательский интерфейс выбора текстового поля компонента . Тест должен показать, что выбор параметров вызывает соответствующее событие.

Здесь находится компонент

<TextField
    inputProps ={{"data-testid": "testId"}}
    id="TextFieldId"
    aria-label={"TextFieldAriaLabel"}
    select
    label="Files"
    value={limit}
    onChange={handleLimitChange}
    SelectProps={{
        native: true,
    }}
    variant="outlined"
>
     {[{value: 5, label: "5"}, {value: 10, label: "10"}, {value: 15, label: "15"}].map(option => (
     <option key={option.value} value={option.value}>
           {option.label}
     </option>
     ))}
</TextField>

Выбор значения «10» инициирует вызов функции с 10 в качестве входного параметра.

Я использую шутку, чтобы написать тест. Я хочу нажать на выбранный компонент, чтобы открыть раскрывающийся список. Затем я хочу нажать на один из вариантов. Чтобы доказать, что событие было инициировано, я проверяю, вызывается ли связанная функция с правильным аргументом. Звучит очень просто, но я столкнулся со многими проблемами. Большинство проблем было связано с тем, что элементы не были найдены, поскольку в материале используются различные компоненты html. Мой лучший подход выглядит следующим образом.

testObject.renderResult.getByTestId('testId').click();
testObject.rerender();
jest.runAllTimers();
const dropdown = testObject.renderResult.getByTestId('testId');
within(dropdown).getByText('10').click();
testObject.rerender();
jest.runAllTimers();
expect(mostRecentImports).toHaveBeenCalledWith(10)

Jest находит элементы, но тест не проходит. Компонент остается по умолчанию, показывая значение 5 (не 10). Что я делаю неправильно?

Answer 1

У меня тоже была такая же проблема в моем приложении. Наконец, я решил это, используя это решение, которое я нашел здесь: https://github.com/testing-library/react-testing-library/issues/322#issuecomment -581650108

Напишите простую функцию, которая открывает меню выбора и выбирает нужный параметр:

const selectMaterialUiSelectOption = (element, optionText) => {
    // The the button that opens the dropdown, which is a sibling of the input
    const selectButton = element.parentNode.querySelector('[role=button]');

    // Open the select dropdown
    UserEvent.click(selectButton);

    // Get the dropdown element. We don't use getByRole() because it includes <select>s too.
    const listbox = document.body.querySelector('ul[role=listbox]');

    // Click the list item
    const listItem = within(listbox).getByText(optionText);
    UserEvent.click(listItem);
};

[... in your test]
selectMaterialUISelectOption(getByTestId('testId'), "10")