blog idea: why do we do userEvent.click? why not just call the dom's click?

[hrgui]

it("should render the menu when the preliminary state is open", async () => {
  renderWithAppProvider(<AppDrawer />, {
    props: { store: setupStore({ ui: { drawerOpen: true } }) },
  });
  expect(screen.getByText(/Home/)).toBeVisible();
  const browseBtn = screen.getByText(/Browse/);
  expect(browseBtn).toBeVisible();
  browseBtn.click();
});

produces the following error

Warning: An update to AppDrawer inside a test was not wrapped in act(...).

When testing, code that causes React state updates should be wrapped into act(...):

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

This ensures that you're testing the behavior the user would see in the browser. Learn more at https://reactjs.org/link/wrap-tests-with-act
    at AppDrawer (/Users/hrgui/projects/catsroll-tv/src/components/app/AppDrawer.tsx:32:29)
    at QueryClientProvider (/Users/hrgui/projects/catsroll-tv/node_modules/@tanstack/react-query/build/cjs/react-query/src/QueryClientProvider.js:74:3)
    at Provider (/Users/hrgui/projects/catsroll-tv/node_modules/react-redux/lib/components/Provider.js:19:3)
    at AppProvider (/Users/hrgui/projects/catsroll-tv/src/AppProvider.tsx:18:3)
    at Router (/Users/hrgui/projects/catsroll-tv/node_modules/react-router/umd/react-router.development.js:821:17)
    at MemoryRouter (/Users/hrgui/projects/catsroll-tv/node_modules/react-router/umd/react-router.development.js:734:7)
Warning: An update to MemoryRouter inside a test was not wrapped in act(...).

When testing, code that causes React state updates should be wrapped into act(...):

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

This ensures that you're testing the behavior the user would see in the browser. Learn more at https://reactjs.org/link/wrap-tests-with-act
    at MemoryRouter (/Users/hrgui/projects/catsroll-tv/node_modules/react-router/umd/react-router.development.js:734:7)