Button clicks not working when using custom container

[ConsoleTVs]

it.concurrent('test', async ({ expect }) => {
  const container = document.createElement('div')
  let value = false

  const result = render(
    () => {
      function doStuff() {
        console.log('hello, world!')
        value = true
      }

      return <button onClick={doStuff} />
    },
    { container }
  )

  const button = result.getByRole('button')

  fireEvent.click(button)

  expect(value).toBe(true)
})

Using vitest, the button event is not fired when using a custom container. When not specified, the event works just fine:

it.concurrent('test', async ({ expect }) => {
  let value = false

  const result = render(
    () => {
      function doStuff() {
        console.log('hello, world!')
        value = true
      }

      return <button onClick={doStuff} />
    }
  )

  const button = result.getByRole('button')

  fireEvent.click(button)

  expect(value).toBe(true)
})

However, I prefer to have tests isolated as they can run concurrently. This works in other frameworks such as react testing lib.

[atk]

You need to mount (and unmount) the custom container yourself, otherwise it will not receive any DOM events. However, our testing library already creates a separate container for each call of render, so you should probably only use custom container if you need to utilize an already existing element.

[ConsoleTVs]

You need to mount (and unmount) the custom container yourself, otherwise it will not receive any DOM events. However, our testing library already creates a separate container for each call of render, so you should probably only use custom container if you need to utilize an already existing element.

Interesting. This code worked for React. In React, the testing library did mount everything to the document, resulting in bad queries on a concurrent level.

May I ask (if you know) why does the dom element need to be mounted to receive events? I'm kinda curious if this is just how JS works after all and why does this in React work

[atk]

This has to do with the way Solid defers events from the container to the target that requries it to be mounted in the DOM.