refactor(Autocomplete): update tests and add safeTimeout to input

[joshblack]

Context #2461

Update the tests for Autocomplete so that they no longer error out when running tests. These changes capture a variety of warnings, notably:

Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()

Warning: It looks like you're using the wrong act() around your test interactions.
    Be sure to use the matching version of act() corresponding to your renderer:

    // for react-dom:
    import {act} from 'react-dom/test-utils';
    // ...
    act(() => ...);

    // for react-test-renderer:
    import TestRenderer from react-test-renderer';
    const {act} = TestRenderer;
    // ...
    act(() => ...);

Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.

console.error
    Error: Uncaught [Error: AutocompleteContext returned null values]

Note

In order to get the snapshot tests and testing-library tests working together, I needed to split them up into a separate test suite. Otherwise, the mismatch act() warning would not go away. Let me know if there is a better approach when everything is in one test suite, I couldn't figure out a way to make it work 🤔

Changelog

New

Changed

• Update AutocompleteInput to use the useSafeTimeout hook instead of setTimeout directly
• Update Autocomplete tests to no longer emit errors in console

Removed

[changeset-bot]

🦋 Changeset detected

Latest commit: d4a005e

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@primer/react	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[github-actions]

size-limit report 📦

Path	Size
dist/browser.esm.js	78.9 KB (+0.02% 🔺)
dist/browser.umd.js	79.54 KB (+0.01% 🔺)

[mperrotti]

This is a great hook. I didn't even realize we had it!

[mperrotti]

It would be even better if we could refactor this setTimeout away entirely. InlineAutocomplete managed to do it with a synthetic change event: https://github.com/primer/react/blob/main/src/drafts/InlineAutocomplete/InlineAutocomplete.tsx#L155

I don't think that should block the rest of these changes though.

[mperrotti]

Has this intentionally been moved outside of the "Autocomplete" describe block?

[joshblack]

@mperrotti yeah, for a super odd reason too 🤔 Let me know if you have any ideas!

In order to get the snapshot tests and testing-library tests working together, I needed to split them up into a separate test suite. Otherwise, the mismatch act() warning would not go away. Let me know if there is a better approach when everything is in one test suite, I couldn't figure out a way to make it work 🤔