[Bug] Disabling console warning for the screen
fatfisz opened this issue · comments
Describe the bug
I have a dropdown that I want to test by clicking on a button. This dropdown has a submenu that I also want to click. To automate this, I implemented some helpers that I use as play
functions. Here's my code:
StoryForTheNestedDropdown.play = openNestedMenu;
async function openMenu({ canvasElement }) {
const button = await within(canvasElement).findByRole('button');
userEvent.click(button);
}
async function openNestedMenu({ canvasElement }) {
await openMenu({ canvasElement });
const subMenu = await screen.findByRole('menuitem', { expanded: false });
userEvent.click(subMenu);
}
As you can see, the openNestedMenu
function refers to the screen
object. That's because the dropdown menu is portalled and is not inside canvasElement
. But when using any method of the screen
object for the first time, I get this warning:
You are using Testing Library's `screen` object. Use `within(canvasElement)` instead.
More info: https://storybook.js.org/docs/react/essentials/interactions
In my case this warning is not useful and introduces unnecessary noise in the console. Also the linked page doesn't have any mention of "screen" in it. It isn't clear why using screen
is not a good idea (at least according to Storybook).
Expected behavior
No warning. Maybe an option to turn it off?
Screenshots and/or logs
Environment
- @storybook/testing-library: 0.0.9
Perhaps we can change this warning to only show if you're using screen
to query for a node found inside the canvasElement, or (simpler) if the canvasElement has no siblings (such as a portal).
I was wondering if there are any differences or drawbacks between using the 'screen' object from @storybook/testing-library versus using 'within(canvasElement)' in storybook play functions?
Some developers in our company have expressed a desire for consistency between unit tests and storybook play functions, and I was hoping to explore the possibility of using a single approach across both contexts.
If there are no drawbacks to using the 'screen' object, would it be possible to remove the warning? Thank you for your time and input.