algolia / algolia/autocomplete

Unhandled promise rejection in unit tests

Open
#1,140 1 comment 0 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
5.3k
Forks
341
Avg merge
3d 1h
Merged PRs (30d)
5

Description

## Description

Hi all, I have a question about this custom react renderer example: [examples/react-renderer/src/Autocomplete.tsx](https://github.com/algolia/autocomplete/tree/next/examples/react-renderer).

In out jest unit tests, we got the below error even if the tests passed.
![Screenshot 2023-05-04 at 11 52 45](https://user-images.githubusercontent.com/12214841/236196581-a4a80223-b223-444d-9776-20901ef90bdd.png)

## Reproduction
```
it('should render results when doing a search', async () => {
const { getByTestId, asFragment } = render(Autocomplete, props)
fireEvent.change(getByTestId('autocomplete-input'), {
target: { value: 'a' },
})
const searchButton = getByTestId('search-button')
await waitFor(() => {
fireEvent.click(searchButton)
})
expect(asFragment()).toMatchSnapshot()
})
```

Even if it's just
```
const { getByTestId } = render(Autocomplete, props)
const autocomplete = getByTestId('autocomplete-input')
autocomplete.focus()
```
You will get the below error:
```
node:internal/process/promises:246
triggerUncaughtException(err, true /* fromPromise */);
^

[UnhandledPromiseRejection: This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). The promise rejected with the reason "[object Object]".] {
code: 'ERR_UNHANDLED_REJECTION'
}
```
One way to fix this is to add a `setTiemout`
```
setTimeout(function () {
autocomplete.focus()
}, 100)
```
but this is not ideal.

Could you please advise what is the best way to test?

## Environment

- OS: [e.g. Windows / Linux / macOS / iOS / Android]
- Browser: [e.g. Chrome, Safari]
- Autocomplete version: [e.g. 1.0.0]

Contributor guide

Open the contributing guide

Research direction

Start with examples/react-renderer/src/Autocomplete.tsx and reproduce the focus and search snippets in the unit tests. Trace the rejected promise observed during those interactions and verify that the tests pass without an unhandled promise rejection or a timeout workaround.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend, testing
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
28/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.