Skip to content

Issues with fireEvent or userEvent Not Working in Unit Tests for Components Using useComboBox from react-aria #1628

@ryanpark

Description

@ryanpark

Hi

I am trying to write unit tests for a component built using useComboBox, but it seems that fireEvent or userEvent is not triggering the input changes as expected. Specifically, I want to verify that when I type in the input field, the suggestions are displayed correctly.

my test :

it.only('should allow typing in the input and show suggestions', async () => {
    render(<AutoComplete items={mockItems} />);
    const inputElement = screen.getByRole('textbox');
    
    console.log(prettyDOM(inputElement));
    
    inputElement.focus();

   
    fireEvent.change(inputElement, { target: { value: 'liv' } }); // or
    userEvent.type(inputElement, 'liv', { delay: 100 });
    
    await waitFor(() => {
      const popover = screen.getByTestId('popover');
      expect(popover.length).toBeGreaterThan(0);
    });
    
    screen.debug();
  });

Obviously, it works as expected at the browser level functionally, but not in the unit tests. Is there something I might be missing in my setup, or is there a specific way I should be using fireEvent or userEvent with components that use useComboBox from react-aria ?

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions