storybookjs / testing-library

Instrumented version of Testing Library for Storybook Interactions

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

[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

My dropdown:
image

The warning:
image

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.