Question

我在组件中有一个简单的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吗？（我宁愿避免这种情况，因为它包括实现细节）

react-native-testing-library：测试元素是否不可见

0 个答案: