如何检查我的 react-native 应用程序的 refreshControl 属性的值？答案

【问题标题】：How can I check value of the refreshControl prop in jest for my react-native app?如何检查我的 react-native 应用程序的 refreshControl 属性的值？
【发布时间】：2018-11-16 09:32:38
【问题描述】：

我正在尝试进行一个开玩笑的单元测试，它只是确认 refreshControl 道具在我的 ScrollView 中处于活动状态。

我目前有一个组件，它基本上呈现以下内容

<ScrollView
  refreshControl={
    <RefreshControl
      refreshing={this.state.refreshing}
      onRefresh={this._onRefresh}
    />
  }
   {children}
/>

它在实践中运行良好，在我的测试中，我正在检查以确认道具是否符合预期。

import { RefreshControl } from 'react-native'
const layout = shallow(<Element />)    
const refreshControl = <RefreshControl
  onRefresh={jest.fn()}
  refreshing={false}
/>
expect(layout.prop('refreshControl')).toEqual(refreshControl)

然后我在运行测试时收到此错误：

Expected value to equal:
  <RefreshControlMock onRefresh={[Function mockConstructor]} refreshing={false} />
Received:
  <RefreshControlMock onRefresh={[Function mockConstructor]} refreshing={false} />

我认为这是因为 onRefresh 函数的实例不同，但不确定如何控制它。有人知道吗？

【问题讨论】：

标签： react-native jestjs

【解决方案1】：

请找到以下步骤来调用 Pull to Refresh 以覆盖覆盖范围。

首先，通过testID获取到scrollView组件获取滚动视图组件中存在的刷新控件从测试用例调用 onRefresh 我添加了以下示例以供参考。

    test('refresh control', async () => {
  const props = createTestProps();
  const component = render(
    <Provider store={store}>
      <ScrollViewComponent {...props} />
    </Provider>
  );

  const scrollView = component.getByTestId('refreshControl');
  expect(scrollView).toBeDefined();

  const { refreshControl } = scrollView.props;
  await act(async () => {
    refreshControl.props.onRefresh();
  });
});

【讨论】：

【解决方案2】：

刚刚意识到我需要检查该功能是否与我在测试中传递给组件的功能相同，所以基本上，匹配的组件中的功能。

this._onRefresh

【讨论】：

【解决方案3】：

MW UMESH 的回答对我帮助很大（因此我赞成），但由于您同步获得了 refreshControl 属性，您可以在此处删除 async 测试。

所以替换

await act(async () => {
  refreshControl.props.onRefresh();
});

有

refreshControl.props.onRefresh();

并且会触发重载机制。

【讨论】：