Skip to content
This repository has been archived by the owner on Jan 23, 2024. It is now read-only.

[Bug] Disabling console warning for the screen #15

Open
fatfisz opened this issue Mar 22, 2022 · 2 comments
Open

[Bug] Disabling console warning for the screen #15

fatfisz opened this issue Mar 22, 2022 · 2 comments
Labels
bug Something isn't working

Comments

@fatfisz
Copy link

fatfisz commented Mar 22, 2022

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
@fatfisz fatfisz added the bug Something isn't working label Mar 22, 2022
@ghengeveld
Copy link
Member

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).

@bmvantunes
Copy link

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.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

4 participants