Interaction canvasElement should be set to the iframe body (Interaction Test)

[cgat]

Describe the bug
The canvasElement that gets passed to the play function points to the root div element in the iframe (<div id="root">). However, if you are using createPortal (with a modal, for example), these elements will be appended outside of the root. This can lead to some confusion, as the elements that appears within the portal are not queryable in the typical manner.

To Reproduce
Can provide if deemed necessary.

System
Storybook 6.4.4. React

Additional context

As a work around, you can reference the parent of canvasElement. Perhaps it would be enough to document this.

MyStory.play = async ({canvasElement}) => {
  //@ts-ignore
 const canvas = within(canvasElement.parentElement)
 ....
}

[adrian-amigues]

I am encountering the same problem.

Thank you for your workaround, but as you show in it, typescript will raise an error as parentElement is typed as HTMLElement | null, so not ideal. But it will work for now.

I'm not sure what the fix could be, maybe the addition of another argument property which encapsulated the portal ? Not sure if it would be possible.

[londonbarrett]

For me it's not working, even using screen or the workaround mentioned before

[mattlong]

My workaround for this is to grab the current document's body element. Typescript is happy with it.

const body = canvasElement.ownerDocument.body;
await expect(
  await within(body).findByText("Text within portal")
)

[Axedyson]

Thanks @mattlong your workaround works!