Correct Ways to Test PrimeReact AutoComplete Component with API Handling in React

[bhushanbankiq]

I’m working on a project using PrimeReact’s AutoComplete component to search customers by different criteria (e.g., name, mobile number, etc.). The search suggestions are fetched from an API, and the component is set up with various event handlers for onSearch, onSelect, and onClear events.

Here’s a simplified version of our AutoComplete component implementation:

<AutoComplete placeholder={Search Customer By ${searchCriteria}} inputClassName='customer-search-bar__autocomplete w-full' className='w-5' field={searchCriteria} value={searchValue} suggestions={suggestions} itemTemplate={(item) => <CustomerInfo {...item} />} virtualScrollerOptions={{ itemSize: 100 }} completeMethod={onSearch} onSelect={onCustomerSelect} onClear={onClear} />

What we’ve tried so far:
Mocking API requests: We’ve used msw (Mock Service Worker) to mock the API calls that fetch customer suggestions. For instance, mocking a POST request to /uds/entity-profile that returns the customer data based on search criteria.

Testing with @testing-library/react: We’ve attempted to test different states (default, loading, error) by simulating user input and checking whether the correct suggestions are displayed. However, handling async API calls and ensuring the suggestions render correctly has been challenging.

Virtual Scrolling: The AutoComplete component uses the virtualScrollerOptions for performance, but it complicates testing because we need to ensure the virtualized list renders correctly when scrolling.

Storybook testing: We’ve integrated MSW into Storybook to mock the API requests and written tests using composeStories to verify the behavior from our Storybook stories. This approach works to some extent but still doesn’t fully cover certain scenarios.

Our challenges:
Simulating async API behavior: We want to ensure that suggestions are fetched and displayed correctly after input, but testing the loading and success states with real async calls (or mocks) has been difficult.

I have tried both fireEvent and userEvent but the value is not changing input.

Handling virtual scrolling: Ensuring that the virtual scroller behaves correctly when there are many suggestions and validating the correct items are displayed upon scrolling.
Edge cases: Testing scenarios like clearing the input, handling invalid search values, and ensuring that the component resets or behaves as expected in various situations.
Has anyone had experience testing an AutoComplete component, especially when it involves API handling? What’s the best approach to thoroughly test all states and behaviors?

I am using react testing library and jest

Would love to hear your thoughts and suggestions!

Thanks!