Listbox.Option click doesn't appear to be updating to the newly selected option during testing

[Abbeyy]

First time poster, please excuse any formatting errors.

What package within Headless UI are you using?
@headlessui/react

What version of that package are you using?
v1.7.4

What browser are you using?
Chrome

What testing libraries are you using?
Jest and React Testing Library

What's your component look like?
`
export const RowsPicker = (props: Props) => {
const { rowsPerPage, setRowsPerPage, currentPage, totalRows } = props;

const dispatch = useAppDispatch();

const selectedRowsPerPage = useAppSelector(newRowsPerPageSelector);

useEffect(() => {
  ...
}, [rowsPerPage]);

const setNumberOfRows = (selectedRows: string) =>
  setRowsPerPage(Number(selectedRows));

const rowDropdownOptions = () =>
  Object.values(ROWS_PER_PAGE).map((currentRows) => (
    <Listbox.Option
      key={currentRows}
      value={currentRows}
    >
      {({ selected }) => (
        <>
          <span
          >
            {currentRows}
          </span>

          {selected ? selectedIcon() : null}
        </>
      )}
    </Listbox.Option>
  ));

const selectedIcon = () => (
  <span
  >
    <AiFillCheckCircle
    />
  </span>
);

return (
  <Listbox
    as="div"
    value={rowsPerPage}
    onChange={setNumberOfRows}
  >
      <Listbox.Button>
        <span>{rowsPerPage}</span>
        <RiArrowUpDownLine
          aria-hidden="true"
          color={BaseColor.GREY_LIGHTER}
          size={18}
        />
      </Listbox.Button>

      <Transition
        as={Fragment}
        leave="transition ease-in duration-100"
        leaveFrom="opacity-100"
        leaveTo="opacity-0"
      >
        <Listbox.Options>
          {rowDropdownOptions()}
        </Listbox.Options>
      </Transition>
  </Listbox>
);

};
`

Whats your test look like?
`
/* @jest-environment jsdom /
/ eslint-env jest */
import "@testing-library/jest-dom/extend-expect";
import { fireEvent, render, screen } from "@testing-library/react";

import configureMockStore from "redux-mock-store";
import thunk from "redux-thunk";

import { describe, expect } from "@jest/globals";
import { RowsPicker } from "..";
import { Provider } from "react-redux";
import { getListboxButton, getListboxOptions } from "./test-utils";

const mockStore = configureMockStore([thunk]);

describe("RowsPicker ", () => {
it(" updates selected when new row selected from picker", async () => {
const defaultRows = 5;
const setRows = jest.fn();

  const store = mockStore({
    settingsSlice: {
      newRowsPerPage: defaultRows,
    },
  });

  render(
    <Provider store={store}>
      <RowsPicker
        rowsPerPage={defaultRows}
        setRowsPerPage={setRows}
        currentPage={1}
        totalRows={44}
      />
    </Provider>
  );

  const listboxButton = getListboxButton();

  if (listboxButton) {
    fireEvent.click(listboxButton);

    const options = getListboxOptions();

    // The outcome from this fire event is not as expected
    fireEvent.click(options[1]);

    fireEvent.click(listboxButton);

    const [five, ten, twentyFive, fifty] = getListboxOptions();

    expect(five.getAttribute("aria-selected")).toBe("false");
    expect(ten.getAttribute("aria-selected")).toBe("true");
    expect(twentyFive.getAttribute("aria-selected")).toBe("false");
    expect(fifty.getAttribute("aria-selected")).toBe("false");
  }
});

});
`

Describe your issue

I have a RowsPicker component that is a headlessui Listbox. During my test, I click on the listbox to open the list options. I successfully grab all 4 list items and attempt to click on the 2nd option. This is where my issue lies.

Before clicking on the list option, the selected list option is the 1st option in the list. After attempting to click on the 2nd list option, the 1st list option remains selected.

I am unsure whether the issue lies with the fireEvent.click or my testing code. Any help is appreciated :)

What else have you tried?
fireEvent.mouseDown as an alternative to click does not appear to be a fix.
Using screen.debug() on the list option before and after the click shows it's aria-selected label remains false, and screen.debug()'ing on the entire RowsPicker component shows that the 1st list option remains selected with it's aria-selected attribute being true.

Thank you so much for reading! & thank you for creating this library!

[Abbeyy]

Can be marked as solved. Will leave response here for a paper trail.

Fortunately, it's an issue on my end and not with HeadlessUI!

For anyone else who may come across the same situation:

My issue lied with incorrect mocking of the useState hook when rendering and testing my component. The error I saw was a misleading result; the solution was to mock my component with a Wrapper and to treat said Wrapper as a parent where you define your useState hook and pass it to the child component, like so:
`
const store = mockStore({
settingsSlice: {
newRowsPerPage: 5,
},
});

const Wrapper = () => {
  const [rows, setRows] = useState<number>(5);

  return (
    <RowsPicker
      rowsPerPage={rows}
      setRowsPerPage={setRows}
      currentPage={1}
      totalRows={44}
    />
  );
};

render(
  <Provider store={store}>
    <Wrapper />
  </Provider>
);

`