没有在Jest中呈现的NativeBase内容-本机测试-库

Question

我有一些带有react-native/expo的本机基代码，通常在电话或模拟器上运行。我尝试使用react-native-testing-library.和jest为它创建一个测试。这样做时，from 本机基中的任何内容都不会呈现，并且无法在测试中找到。

是否有人经历过这一过程，并且知道一个解决方案，以便在测试期间呈现内容的子级？

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

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 (https://github.com/callstack/react-native-testing-library/issues/118)中的react本机测试库中提出了这个问题。

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

Answer 2

更新2022

我在他们的文档里找到了解决方案：

要解决上述问题，只需在测试中将initialWindowMetrics传递给NativeBaseProvider。

const inset = {
  frame: { x: 0, y: 0, width: 0, height: 0 },
  insets: { top: 0, left: 0, right: 0, bottom: 0 },
};

<NativeBaseProvider initialWindowMetrics={inset}>
  {children}
</NativeBaseProvider>;