У меня есть простой TextInput
в компоненте. Используя styled-components/native
, я применяю display:none
, чтобы скрыть его (но он по-прежнему получает нажатия клавиш от пользователя, поэтому я могу отобразить клавиатуру).
Как проверить, что этот элемент действительно невидим, используя react-native-testing-library
?
Я бы предпочел проверить не детали реализации (применен ли стиль display:none
), а поведение представления («пользователь не должен видеть этот компонент», так как это философия тестирования библиотеки, которую я использую) ).
Вот мой код, очень упрощенный:
import styled from 'styled-components/native';
...
const HiddentTextInput = styled.TextInput`
display: none;
`...
const MyComponent = () => {
return(
<View>
...
<HiddenTextInput testID='hidden-input' />
...
</View>
)
}
//tests
...
it('TextInput should be hidden', () => {
const { queryByTestId } = render(<MyComponent />);
expect(queryByTestId("hidden-input")); // <-- How do I test it is
// . hidden??
})
Должен ли я использовать другую библиотеку, такую как react-test-renderer
, и получить json
? (Я бы предпочел этого избежать, потому что он включает детали реализации)