React-testing-library: Testing Async Hooks

[helabenkhalfallah]

I want to test UsersList with call an async hooks fetch :

// functional component
const UsersList = ({ onItemSelected, }) => {
  // async service fetch hooks
  const url = 'service-url';
  const { error, loading, data, } = **useService**(Service, url, {
    amount: 0,
  });
  return (
    <Fragment>
      <div className="user-list">
          {
            data.map(user => (
              <UserItem
                key={user.id}
                user={user}
                onItemSelected={onItemSelected}
              />
            ))
          }
        </div>
    </Fragment>
  );
};

// async data fetcher HOC
function **useService**(Service, url, params) {
  // service query
  const {
    query,
  } = Service;

  // define internal state
  const [
    error,
    setError,
  ] = useState(null);
  const [
    loading,
    setLoading,
  ] = useState(true);
  const [
    data,
    setData,
  ] = useState(null);

  // execute service
  useEffect(() => {
    query(
      url,
      params,
      ((response) => {
        setData(response);
        setLoading(false);
      }),
      ((serviceError) => {
        setError(serviceError);
        setLoading(false);
      })
    );
  }, []);

  return {
    error,
    loading,
    data,
  };
}

export default useService;

  // query
  // await response of users fetch call
  const url = `url`;
  const response = await axios.get(url, queryParams(params));

  // return result
  return response;

Test :

// mock axios call
jest.mock('axios');

**Case 1:**
it('Should Mount Component & Display Data', async () => {
    axiosMock.get.mockResolvedValue(UserListMock);
    const { getByTestId, getByText, getByPlaceholderText, container, } = render(<UsersList />);
    const titleNode = await waitForElement(() => getByTestId('header-title'));
    expect(titleNode).toHaveTextContent('test');
});

**Case 2:**
it('Should Mount Component & Display Data', async () => {
    let result;
    axiosMock.get.mockResolvedValue(UserListMock);
    act(() => {
      result = render(<UsersList />);
    })
    const { getByTestId, getByText, getByPlaceholderText, container, } = result;
    const titleNode = await waitForElement(() => getByTestId('header-title'));
    expect(titleNode).toHaveTextContent('test');
});

But I got :

1/ always

    act(() => {
      /* fire events that update state */
    });
    /* assert on the output */

2/ titleNode always null.

How should be my test to test Component = UI + Hooks ?
How to await for useService Hooks to end ?

Thanks :)

[kentcdodds]

Hi @helabenkhalfallah,

We're still trying to figure out the best way to avoid that new warning in React 16.8.0

I'm going to go ahead and close this in favor of our existing discussion: https://github.com/kentcdodds/react-testing-library/issues/281

As well as the discussion on React: https://github.com/facebook/react/issues/14769 (this is not really a react-testing-library issue).

[helabenkhalfallah]

Hello @kentcdodds OK, but I have two issues :(
titleNode always null.

[helabenkhalfallah]

// mock axios call
jest.mock('axios');

**Case 1:**
it('Should Mount Component & Display Data', async () => {
    axiosMock.get.mockResolvedValue(UserListMock);
    const { getByTestId, getByText, getByPlaceholderText, container, } = render(<UsersList />);
    const titleNode = await waitForElement(() => getByTestId('header-title'));
    expect(titleNode).toHaveTextContent('test');
});

**Case 2:**
it('Should Mount Component & Display Data', async () => {
    let result;
    axiosMock.get.mockResolvedValue(UserListMock);
    act(() => {
      result = render(<UsersList />);
    })
    const { getByTestId, getByText, getByPlaceholderText, container, } = result;
    const titleNode = await waitForElement(() => getByTestId('header-title'));
    expect(titleNode).toHaveTextContent('test');
});

titleNode always null.

[kentcdodds]

Hi @helabenkhalfallah,

Could you ask this on the official community support channel please? https://spectrum.chat/react-testing-library

Thanks, and good luck!

[helabenkhalfallah]

OK thank you :) :)