Rely on userEvent instead of fireEvent

[severo]

userEvent is recommended over fireEvent. The code is simpler and clearer: we await that the action takes effect. I think it was the issue with the flaky test.

Note also that I fixed an issue with mocked functions that were not cleared between tests, and fixed an erroneous test (clicking on dropdown entry DOES close the dropdown).

fix #329

[Copilot]

Pull Request Overview

Replace fireEvent with userEvent across tests to better simulate real user interactions and reduce flakiness; also add consistent mock cleanup between tests and correct a dropdown behavior test.

• Switch tests from fireEvent to async userEvent usage
• Add beforeEach vi.clearAllMocks across test suites to reset mocks
• Fix dropdown test to close on selecting an item

Reviewed Changes

Copilot reviewed 11 out of 11 changed files in this pull request and generated 7 comments.

Show a summary per file

File	Description
test/lib/sources/hyperparamSource.test.ts	Add beforeEach vi.clearAllMocks to reset fetch mocks between tests
test/lib/sources/httpSource.test.ts	Add beforeEach vi.clearAllMocks to reset fetch mocks
src/components/Welcome/Welcome.test.tsx	Migrate to userEvent and add mock reset; refactor onClose to shared mock
src/components/SlidePanel/SlidePanel.test.tsx	Replace mouse fireEvents with userEvent.pointer; make tests async
src/components/MarkdownView/MarkdownView.test.tsx	Add mock reset hook
src/components/JsonView/JsonView.test.tsx	Add mock reset hook
src/components/Json/Json.test.tsx	Migrate to userEvent for click interactions and toggles
src/components/ImageView/ImageView.test.tsx	Add mock reset hook
src/components/Folder/Folder.test.tsx	Migrate to userEvent for typing and keyboard; add mock reset; adjust search-focus test
src/components/File/File.test.tsx	Add mock reset hook
src/components/Dropdown/Dropdown.test.tsx	Migrate to userEvent for clicks/keyboard; adjust behavior tests

---

_{Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.}

[platypii]

I kind of hate the "magic" of react testing library. I REALLY hate screen. And I kind of feel the same way about fireEvent and userEvent. Why can't we just do element.click() and use the native methods? Why do we have to use these made-up functions by react testing library that does "full interactions". What does that even mean?? I have no idea what actually happens under the hood when we call userEvent.

If this solves testing problems (race conditions etc), then I'm fine with this. If this removes act calls then it makes sense. (act is also magical)

I dunno I wish there was a more explicit way to do react testing. It's fine for now though, I don't have a better idea. 🤷

[severo]

Indeed. I have no opinion about this, but indeed, I guess we could do without it. Their getBy/queryBy/findBy methods, once well understood (which took me a while), allow for concise tests (eg, getByRole('button') asserts that there is exactly one button in the rendered page). And one thing I like is the focus they put on relying on roles and other accessible attributes, instead of querying specific HTML tags. But it's not related to using a library or not, we could do the same in vanilla javascript.

I guess that if we remove it and work with vanilla javascript, we would have to use act() and waitFor().