Запрос корневого элемента React в библиотеке тестирования React
В моем компоненте React div с идентификатором #keys переходит от display: none к display: flex, когда вы нажимаете /, фокусируясь на document.
Я написал для этого тест, используя библиотеку тестирования Jest и React:
Приложение.tsx:
return (
<div id = "keys" style = {{ display: isInputFocused ? 'flex' : 'none' }}>
<input
type = "text"
ref = {inputRef}
onChange = {handleInputChange}
onBlur = {handleInputBlur}
value = {inputValue}
/>
<!-- more elements -->
</div>
);
Приложение.test.tsx:
test('`input` is visible after pressing `/`', () => {
render(<App />);
fireEvent.keyDown(document, { key: '/' });
const input = screen.getByRole('textbox', { hidden: true });
expect(input).toBeVisible();
});
Как видите, в моем тесте я запрашиваю input внутри #keys вместо #keys. Если я хочу запросить #keys в RTL, я должен добавить role или data-testid к #keys.
Вопрос 1: Это лучший способ сделать запрос #keys? Чтобы я проверял видимость #keys вместо input внутри него? (Без необходимости добавлять к нему role или data-testid?)
Вопрос 2: Или, может быть, согласно философии RTL, я должен тестировать не #keys, а input внутри него?
Ответы 1
1. Вы по-прежнему можете использовать «обычные» запросы dom в RTL, хотя это не рекомендуется, как указано в документах :
const { container } = render(<MyComponent />)
const keys = container.querySelector('#keys');
Вы также можете использовать parentElement или parentNode, но я думаю, что это относится к той же категории, что и выше.
const keys = screen.getByRole('textbox').parentElement;
2. Как вы и подозревали, философия RTL заключается в запросе и тестировании элементов, которые видны и важны для пользователей вашего приложения, а это означает, что если вы не можете запросить эти элементы с помощью запросов с высоким приоритетом, вам либо не нужно тестировать их или вам нужно улучшить их доступность:
Документы RTL (из первой ссылки, которой я поделился)
Обратите внимание, что использовать это в качестве аварийного люка для запроса по классу или идентификатору не рекомендуется, поскольку они невидимы для пользователя.
Ваш элемент keys является просто контейнером и не имеет никакого значения для конечного пользователя, с другой стороны, входные данные внутри него — это элементы, с которыми пользователь будет взаимодействовать, а это значит, что они должны быть проверены. поведение и видимость.