How can I check value of the refreshControl prop in jest for my react-native app?

Question

I am trying to do a jest unit test which simply confirms that the refreshControl prop is active in my ScrollView.

I currently have a component that essentially renders the following

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

It works fine in practice, and in my test, I am checking to confirm that the prop is as expected.

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

I then get this error when running my test:

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

I assume it's because the instance of the onRefresh function differs, but not sure how to control that. Does anyone perhaps know?

Answer 1

Please find below steps to call Pull to Refresh to cover coverage.

First, get access to the scrollView component through testID Fetch refresh control present in the scroll view component call onRefresh from test case I have added the below Example for reference.

    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();
  });
});

Answer 2

Just realised that I need to check that the function is the same one I pass into the component, in the test, so basically, the function in the component that matches.

this._onRefresh

Answer 3

MW UMESH's answer helped me quite a lot (and I therefore upvoted it) but since you get the refreshControl prop synchronously, you can remove the async test here.

So replace

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

With

refreshControl.props.onRefresh();

And the reload mechanism will trigger.