How to test RefreshControl "pull-to-refresh" behavior?

[flo-sch]

Environment

• react-native: v0.65.1
• jest: v27.1.0
• @testing-library/react-native: v7.2.0

Ask your Question

I have a component running a GraphQL query (ApolloClient), and rendering a with a that triggers the query's refetch function:

// MyComponent.tsx
import React from 'react';
import { ActivityIndicator, RefreshControl, ScrollView, ScrollViewProps, Text } from 'react-native';
import { useQuery, gql } from '@apollo/client';

export const TEST_QUERY = gql`
  query TestQuery {
    test {
      placeholder
    }
  }
`;

export interface TestQueryResponse {
  test: {
    placeholder: string;
  };
}

const MyComponent: React.FC<ScrollViewProps> = (props) => {
  const { data, loading, refetch } = useQuery<TestQueryResponse>(TEST_QUERY);

  return (
    <ScrollView
      {...props}
      refreshControl={<RefreshControl refreshing={loading} onRefresh={refetch} />}
    >
      {loading ? (
        <ActivityIndicator accessibilityLabel='loading' />
      ) : data?.test ? (
        <Text>{data.test.placeholder}</Text>
      ) : null}
    </ScrollView>
  );
};

export default MyComponent;

Now, I would like to test the "refetch" behavior.
I thought I would try to fire a "refetch" event on the ScrollView:

// MyComponent.test.tsx
import 'react-native';
import React from 'react';
import { MockedProvider } from '@apollo/client/testing';
import { fireEvent, render } from '@testing-library/react-native';

import MyComponent, { TEST_QUERY } from './MyComponent';

describe('MyComponent', () => {
  test('refetch the query when pulled', async () => {
    // I have setup a custom render method using <MockedProvider /> as a wrapper,
    // This is a simplified inline version of my case:
    const { findByText, getByTestId, getByA11yLabel } = render(
      <MockedProvider
        addTypename={false}
        mocks={[
          {
            request: {
              query: TEST_QUERY,
              variables: {},
            },
            result: {
              data: {
                test: {
                  placeholder: 'Hello World',
                },
              },
            },
          },
        ]}
      >
        <MyComponent testID='my-component' />
      </MockedProvider>,
    );

    // wait for initial query to be done loading
    await findByText('Hello World');

    // attempt to simulate a "pulling" event
    fireEvent(getByTestId('my-component'), 'refresh');
    // --> No handler function found for event: "refresh"

    // expect the <ActivityIndicator /> to be rendered
    expect(getByA11yLabel('loading')).toBeDefined();
  });
});

But this test case throws an error on the "fireEvent" line:

No handler function found for event: "refresh"

Am I doing something wrong with the API here?
Should I mock something specifically (like <RefreshControl /> itself for this scenario?
(or is there a better way to assert that behavior?)

I did not find a list of "events" that can be fired, but from what I understand of the fireEvent API, it seems to expect an onRefresh handler to exists on the target element.
Which indeed is not the case here, since the onRefresh handler is defined on the <RefreshControl /> component itself.

If the snippets are not enough, I am happy to provide a repository or such?

[hatem-72]

Same here.
I tried to simulate the pull-to-refresh behaviour by firing a scroll event. But it does not seem to work with FlatList...

const MyList = getByA11yLabel('some-list');

const scrollUpEvent: Partial<NativeScrollEvent> = {
    contentSize: { height: 400, width: 100 }, // List content dimensions
    contentOffset: { y: -48, x: 0 }, // Scroll to above of the top edge
    layoutMeasurement: { height: 200, width: 100 }, // Device dimensions
};

fireEvent.scroll(MyList, {
    nativeEvent: scrollUpEvent,
});

[Gabsys]

I am able to trigger the refresh behavior with this:

const eventData = {
  nativeEvent: {
    contentOffset: {
      x: 0,
      y: -1,
    },
    contentSize: {
      // Dimensions of the scrollable content
      height: 885,
      width: 328,
    },
    layoutMeasurement: {
      // Dimensions of the device
      height: 469,
      width: 328,
    },
  },
}

fireEvent.scroll(YOUR_SCROLL_VIEW, eventData)

[nicholascm]

I am able to trigger the refresh behavior with this:

const eventData = {
  nativeEvent: {
    contentOffset: {
      x: 0,
      y: -1,
    },
    contentSize: {
      // Dimensions of the scrollable content
      height: 885,
      width: 328,
    },
    layoutMeasurement: {
      // Dimensions of the device
      height: 469,
      width: 328,
    },
  },
}

fireEvent.scroll(YOUR_SCROLL_VIEW, eventData)

Hi @Gabsys - how did you determine your layout measurements + content size in the test?

[Umesh079]

Please find below steps to call Pull to Refresh.

1. First get access to the scrollView component through testID
2. Fetch refresh control present in the scroll view component
3. 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();
  });
});

[chris-chapin]

@Umesh079 this technically works but only to a certain extent (ie. does it set loading=true?, will it trigger any of the activity indicator logic?).

But, there is a broader problem though, and it's what I think this issue hints at, a solution like this violates the principle of "avoiding the dreaded test user", because it explicitly tests implementation details, and not how an end user would use the product.

I started using RNTL last week and I have hit similar "maturity issues".

For example, how do I simulate the user typing with the on-screen keyboard (or pressing backspace)? Simply using "fireEvent.changeText" does not cause other events to fire (notably keyboardDidShow!), and does not hit any logic like, "what if the keyboard is now covering the TextInput?".

What if I have a multiline TextInput and I want to be capturing onContentSizeChange? Again, fireEvent.changeText could care less about triggering this event.

What if I want to be able to capture "onSubmitEditing" for my TextInput because "returnKeyType="done""? I can't simulate that press without directly calling the event handler.

At the end of the day, we're in RN land, and we have to be creative with our testing solutions because they aren't as mature as what React.js has (they have an entire userEvent library for all kinds of events!).

Sorry for the rant!

[steniowagner]

I'm having a very similar problem, but instead of refetch the query by the "pull-to-refresh" action, I'm trying to do it with pagination (onEndReached being triggered from the FlatList).

The thing is that it seems that there's no easy way (or no way at all) to update the component and also update the variables used on the query. I'm trying to do it using the RTL's "rerender" function, but it always reset all the process and I always get stuck on the "first page" of the pagination, since I can't update my query variables to { page: 2 }, for example.

I think that the workaround for my case will be mock the hook responsible for the pagination and see how it goes.

[Umesh079]

@Umesh079 this technically works but only to a certain extent (ie. does it set loading=true?, will it trigger any of the activity indicator logic?).

But, there is a broader problem though, and it's what I think this issue hints at, is a solution like this violates the principle of "avoiding the dreaded test user", because it explicitly tests implementation details, and not how an end user would use the product.

I started using RNTL last week and I have hit similar "maturity issues".

For example, how do I simulate the user typing with the on-screen keyboard (or pressing backspace)? Simply using "fireEvent.changeText" does not cause other events to fire (notably keyboardDidShow!), and does not hit any logic like, "what if the keyboard is now covering the TextInput?".

What if I have a multiline TextInput and I want to be capturing onContentSizeChange? Again, fireEvent.changeText could care less about triggering this event.

What if I want to be able to capture "onSubmitEditing" for my TextInput because "returnKeyType="done""? I can't simulate that press without directly calling the event handler.

At the end of the day, we're in RN land, and we have to be creative with our testing solutions because they aren't as mature as what React.js has (they have an entire userEvent library for all kinds of events!).

Sorry for the rant!

I understand your point but in my case, it was plain and simple. My whole target was to achieve maximum coverage so to do that I just called the prop to full fill my requirement.

[mdjastrzebski]

The recommended solution is the one mentioned by @Umesh079:

• calling fireEvent with refresh/onRefresh event on RefreshControl found e.g. by testID.

The reason why RNTL does not call additional event handlers when you fire given event, is that RNTL runs JS-only environment, there is no native counterpart, unlike React Native app. So feature that depends on JS -> native -> JS event flow in React Native app will not fire because of the missing native part. We try to simulate some core cases here, but that no way covers every interaction.

[mdjastrzebski]

Closing the issue as resolved.

[pachun]

For posterity (not to reopen the issue), I use this to trigger pull to refresh with a refreshControl prop set on my FlatList:

      screen
        .getByTestId("inbox emails list")
        .props.refreshControl.props.onRefresh()

Where "inbox emails list" is the testID of my FlatList.