I’m trying to make a call to the navigate function inside an item in my sidebar. In practice, the button is working normally, but when I test it, user.click isn’t working, what’s wrong in my test code? Note: ItemsContainer and Item are styled components.

Test code:

test("if click on home button navigate to /p/mobile/esteira", async () => {
    const queryClient = new QueryClient();

    render(
      <QueryClientProvider client={queryClient}>
        <BrowserRouter>
          <Sidebar />
        </BrowserRouter>
      </QueryClientProvider>
    );

    const navigateMock = jest.fn();

    const { container } = render(<Item onClick={navigateMock} />);
    expect(container).toBeInTheDocument();

    const homeItem = screen.getByTestId("menu-item-home");
    await user.click(homeItem);

    expect(navigateMock).toHaveBeenCalled();
    expect(navigateMock).toHaveBeenCalledWith("/p/mobile/esteira");
  });

Component code:

const Sidebar = () => {
 ...
  return (
    <>
      <NavContainer ref={sidebarRef} isOpen={isMenuOpen}>
        ...
          <ItemsContainer>
            <Item
              data-testid="menu-item-home"
              onClick={() => navigate("/p/mobile/esteira")}
            >
              <Flex>
                <img
                  src={home2}
                  alt="Descrição da imagem"
                  style={{ width: "20px", height: "20px" }}
                />
                <ItemTitle isMenuOpen={isMenuOpen}>Home</ItemTitle>
              </Flex>
            </Item>
          </ItemsContainer>
...
};