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

Question

我有一些带有本机基础代码的react-native/expo，可以在手机或模拟器上正常运行。我尝试使用jest和react-native-testing-library为其创建一个测试。这样做时，无论里面有什么from 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"

Answer 1

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

问题出在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