React-Aria Component Combobox is not Fully rendering in Consuming Application Tests

[adsaines]

Our Various Versions of Things

• Testing Framework and version: "@testing-library/jest-dom": "^5.16.5", "@testing-library/react": "^14.0.0", "@testing-library/user-event": "^14.4.3", "vitest": "^1.5.3"

• DOM Environment: "jsdom": "^21.1.0",

• React & Node Versions: "@types/node": "18.14.6", "@types/react": "^18.2.45", "@types/react-dom": "18.0.11",

Relevant code or config:

it('should call to "MYAPI" when I enter values into my input', async () => {
        const user = userEvent.setup();
        const searchTerm = 'racc';
        const myContext = {...mockContext};
        renderContext(myContext)

        // click radio button for input to appear
        const showInputRadio = await screen.findAllByRole('radio', { name: 'Yes' });
        showInputRadio[0].click();
        // type our search in here
        // Here's the ISSUE spot: the input here is not being fully rendered / doesn't have all of the aria values & roles
        const input = screen.getByPlaceholderText('Type to Start Searching...');
        input.click();
        await user.type(input, searchTerm);

        await waitFor(() => {
            expect(fetchMock).toHaveBeenCalledWith(
                `/api/MYAPI?term=${searchTerm}`,
                buildRequestBody({}, 'GET')
            )
            expect(fetchMock).toHaveBeenCalledTimes(2);
        })
    })

What you did:

We built a component library for internal use at our company using React-Aria components. We ingest / consume the library in a separate application.

What happened / Problem Description:

Our components will render fully within the component library and can be tested to their full functionality: clicking, typing, searching, hit's api... etc. We confirmed that it works on our local & dev branches when running normally.

However, when we run our tests in the consuming application the input box that get's rendered in the testing dom is not fully filled out and the interactions do not properly execute. In this particular instance, we cannot type into the input to trigger the API call.

Example of Input rendered within our component tests...

Example of Input rendered within our consuming application using the same component...

Reproduction:

Unfortunately it is not possible in this situation to setup an example.

Suggested solution, sorry, we don't really have one

We have tried a mix of userEvent.type and fireEvent.change to alter the input's value. we have tried firing those events at different levels of the component. We have tried selecting using different methodologies (find, query, get) on different values (test-id, placeholder, role... etc).

Ultimately, we are confused and do not know why it is not rendering fully in the tests even though it works within the application itself. It's a definite turning point for us because if we can't test the components that we create outside of the library we're gonna have to scrap it and start over.

[MatanBobi]

Hi @adsaines I understand the situation but without a proper reproduction it will only be guessing and it looks like this has too many internal solutions to even try and guess what's happening there. Please try to create a minimal reproduction so we'll be able to try and assist here.