[Select] React Testing Library does not find select event on VaSelect component

[ptouchton]

What happened

In a recent ticket we upgraded VAOS to use the new VaSelect web component from the VA component library. We came across an issue/concern in our unit testing of this component using RTL (React testing Library). We are not able to use RTL’s native select feature because the VaSelect web component is rendered within a shadow dom.

Below is a snippet of our solution to trigger the event

    // Choose Provider
    userEvent.click(
      await screen.findByRole('button', { name: /Choose a provider/i }),
    );
    // await waitFor(async () => {
    expect(await screen.findByText(/Displaying 1 to/i)).to.be.ok;
    // });
    const providersSelect = await screen.findByTestId('providersSelect');
    // call VaSelect custom event for onChange handling
    providersSelect.__events.vaSelect({
      detail: { value: FACILITY_SORT_METHODS.distanceFromCurrentLocation },
    });

What I expected to happen

To use RTL's click method on the select component.

This is the line of code that was replaced when we refactored to the new component.

userEvent.click(await screen.findByText(/use your current location/i));

[k80bowman]

We'd like to address this by updating the component to use the native change event.

[andresriveratoro]

Update on PR:

I have been unable to observe the vaChange event fire in vets-website tests.

This code allows you to select a new value using userEvent and the test passes for this very simple example, but vaChange isn't fired.

const select = await screen.findByTestId('providersSelect');
userEvent.selectOptions(select, 'Two');
expect(screen.getByRole('option', { name: 'Two' }).selected).to.equal(true);

This throws a Error: The given element does not have a value setter

fireEvent.change(select, { target: { value: 'Two' } });

Related Issues

testing-library/dom-testing-library#413
testing-library/dom-testing-library#742

[andresriveratoro]

Moving this to Icebox to look at a later time

[caw310]

Closing as this is old and the VADS has been updated. If there is still an issue file a new request.