How tou use NextUI components with react-testing library

[pacoorozco]

Hi!

I'm having a lot of troubles to use NextUI components when testing. Imagine you have a form which uses NextUI components and you want to test that the form behaves as expected. I'm using vitest and react-testing library to implement the tests.

One of the most problematic components is <AutoComplete>. I would like to be able to select one of the options when testing and submit the form, but it's very tricky. The way I was using in the previous version 2.4 is not working anymore in version 2.6.8. How do you suggest to set values when testing?

[GasparAdragna]

I having the same issue. I'm using isVirtualized and it broke all my previous tests, now the listbox returns no options to select.

[pacoorozco]

To give more context, this is how I was selecting options of the <AutoComplete> component:

export async function selectOptionsFromNextUIAutocomplete(
  user: UserEvent,
  screen: RenderResult,
  input: HTMLElement,
  nOption: number = 0,
) {
  const options = await getNextUIAutocompleteOptions(user, screen, input);
  // select the target item
  await user.click(options[nOption]);
}

export async function getNextUIAutocompleteOptions(user: UserEvent, screen: RenderResult, input: HTMLElement) {
  await user.click(input);

  expect(input).toHaveAttribute('aria-expanded', 'true');
  expect(input).toHaveFocus();

  const teamInputDialog = screen.getByRole('dialog', { name: '' });
  return within(teamInputDialog).getAllByRole('option');
}

This approach worked well before but with the new version 2.6.x any other interaction after this, is not working...

it('When create new realm then realm is created and modal is closed', async (context) => {
    // ...

    const screen = render(
      <UserRealmForm />,
    );

    const newDatastoreGroupButton = screen.getByRole('button', { name: 'New realm' });
    await act(async () => fireEvent.click(newDatastoreGroupButton));

    const dialog = screen.getByRole('dialog', { name: 'New realm' });

    // Need to fill the form as some fields are required
    setInputValue(screen, 'textbox', 'name Name', 'realm-name');
    setInputValue(screen, 'textbox', 'team-email Team email', '[email protected]');
    await selectOptionsFromNextUIAutocomplete(user, screen, screen.getByRole('combobox', { name: 'Team' }), 0);

    // Click on create button --> This is not found unless I use the hidden: true option.
    const createButton = within(dialog).getByRole('button', { name: 'Create' });
    
   // ...
  });

Any getBy*() after the <AutoComplete> is not found unless I use the hidden: true option. It looks like the AutoComplete component is not closed...

any help?

[kalanda]

We are having similar issues with 2.6.x. With previous release 2.4.8 the test passes, but since the last release (2.6.0 or higher), acting with UserEvent to set the value of an input text of type number doesn't works.

// Doesn't works with NextUI 2.6.10
await user.type(share, '0.5'); 

// Works fine with NextUI 2.6.10
fireEvent.change(share, { target: { value: '0.5' } });

UserEvent.click seems to work fine.