How to write interaction test for the modal/overlay/dialog?

[seito2]

Some dialog components will append into the last of body tag(for example, material ui/dialog), but the canvasElement is only under #root, so I couldn't test it.
Does anyone know how to write the interaction test for dialog?

Story Code example:

export const Dialog: Story = {
  play: async ({ canvasElement }) => {
    const canvas = within(canvasElement);

    const emailInput = canvas.getByLabelText('email', {
      selector: 'input',
    });
  },
};

[scottrippey]

You might want to wrap the document node, like:

const canvas = within(canvasElement.ownerDocument.body);

[fehaa]

You might want to wrap the document node, like:

const canvas = within(canvasElement.ownerDocument);

It only worked for me after I wrote canvasElement.ownerDocument.body instead of canvasElement.ownerDocument but your answer helped me a lot! Thanks!

[scottrippey]

The best way to handle this is to make sure your modal has an accessible role="dialog" and then use screen like this:

import { within, screen } from '@storybook/testing-library';
...
const canvas = within(screen.getByRole('dialog'));

[Jazzmanpw]

I'm not sure about context, but I encountered the same issue with MUI modals. When I used the screen, I saw a warning from Storybook that I'm testing screen from testing library, but I should use canvas instead. So what I did is I overrided default property for the modal to make it render into the #storybook-root element instead of the iframe body

// roughly this, env variable comes from Vite, may be different for you
const muiModalDefaultProps = {
  ...(import.meta.env.STORYBOOK === 'true' && {
    container: document.getElementById('storybook-root'),
  }),
};

Then, I just canvas.getByRole('dialog') and go from there. I suggest the same approach can be used for other modal providers as well