NativeBase 内容未在 Jest 中使用 react-native-testing-library 呈现

Posted 2023-02-19

【中文标题】NativeBase 内容未在 Jest 中使用 react-native-testing-library 呈现

【英文标题】：NativeBase Content not rendered in Jest with react-native-testing-library

【发布时间】：2019-10-13 10:32:08

【问题描述】：

我有一些 react-native/expo 带有 native-base 代码，可以在手机或模拟器上正常运行。 我尝试使用 jest 和 react-native-testing-library 为其创建测试。这样做时，来自 native-base 的 中的任何内容都不会被渲染，并且无法在测试中找到。

有没有人经历过这种情况并且知道解决方案，以便在测试期间呈现 Content 的子级？

下面是一个示例代码来说明我在说什么。 非常感谢您的帮助。

import  render  from 'react-native-testing-library';
import 
  Content, Container, Text
 from 'native-base';


class App extends React.Component 

  render() 
    return (
      <Container>
        <Content>
          <Text testID="textId">Hello</Text>
        </Content>
      </Container>
    );
  


describe('Testing Content', () => 
  const  queryByTestId  = render(<App />)
  it('renders text inside content', () => 
    expect(queryByTestId('textId')).not.toBeNull()
  );

)

包的版本是：

"expo": "^32.0.0",
"react": "16.5.0",
"native-base": "^2.12.1",
"jest-expo": "^32.0.0",
"react-native-testing-library": "^1.7.0"

【参考方案1】：

我在 github (https://github.com/callstack/react-native-testing-library/issues/118) 的 react-native-testing-library 中提出了这个问题。

问题在于 react-native-keyboard-aware-scroll-view

要解决它，我们可以通过以下方式模拟它

jest.mock('react-native-keyboard-aware-scroll-view', () => 
    const KeyboardAwareScrollView = ( children ) => children;
    return  KeyboardAwareScrollView ;
);

我还在这里为可能正在寻找的人举了一个例子： https://github.com/pedrohbtp/rntl-content-bug