On click event cannot be triggered

[dreamrukia]

• @testing-library/react version: ^11.2.5
• Testing Framework and version: jest@^26.6.3
• DOM Environment: jest-environment-jsdom-sixteen@^1.0.3

Relevant code or config:

    render(
      <DndProvider backend={TestBackend}>
        <Provider
          snackbarUiStore={snackbarUiStore}
          layoutComponentStore={layoutComponentStore}
          activityTypeStore={activityTypeStore}
          sceneStore={{}}
          authStore={authStore}
          configurationStore={configurationStore}
        >
          <TimelineForm activityTypeId={activityType.id} />
        </Provider>
      </DndProvider>
    );

    let mobileScene2 = await screen.findByTestId('mobile-screen-1');
    userEvent.click(mobileScene2);

    let revealsGroup = await screen.findByText('Reveals');
    userEvent.click(revealsGroup);

    const revealComponent = await screen.findByTestId('layout-component-18');

    expect(revealComponent.className.includes('disabled')).toBeTruthy();

What you did:

I upgraded the @testing-library/react version from 9.4.0 to 11.2.5. After the upgrade, some of my tests fail.

Please refer to these 2 lines:

let revealsGroup = await screen.findByText('Reveals');
userEvent.click(revealsGroup);

I'm getting an element with text Reveals which has an onClick handler. And then fire the onClick event of it.

What happened:

The onClick event is not triggered after userEvent.click(revealsGroup);
But when I get this element twice, the onClick event can be triggered correctly

This does not work:

let revealsGroup = await screen.findByText('Reveals');
userEvent.click(revealsGroup);

But this works:

let revealsGroup = await screen.findByText('Reveals');
userEvent.click(await screen.findByText('Reveals'));

Reproduction:

Please see the description above, cannot reproduce it in the Codesandbox

Problem description:

I'm assuming that the onClick event is not attached to the element when the first call of the findByText.
But when get this element again, the event is attached.

Suggested solution:

[MatanBobi]

Hi @dreamrukia, thanks for opening this one :)
It's pretty hard to understand without a reproduction but just to get some more background, is there something asynchronous happening there? Maybe the element got removed and then added again?
Also, is there a particular reason why you're using findBy* and not getBy*? Since findBy* returns a promise, I'm trying to understand if there's a real use-case for a promise here :)

[dreamrukia]

Yes, this component will be rendered after an async fetch in the componentDidMount from it's parent component. I have confirmed that this component renders only once by putting a console.log in its render function.

[eps1lon]

@dreamrukia It doesn't look like this bug report has enough info for one of us to reproduce it.

Please provide a CodeSandbox (https://react.new), a link to a repository on GitHub, or provide a minimal code example that reproduces the problem.

Here are some tips for providing a minimal example: https://stackoverflow.com/help/mcve

Note that this issue will be closed if no reproduction is provided. Config, source, and test are necessary for us to be able to debug these issues.

[eps1lon]

Closing since no reproduction was provided.