diff --git a/code/core/src/test/testing-library.ts b/code/core/src/test/testing-library.ts index 3c9fb5a6d1d2..b0a3b44c44df 100644 --- a/code/core/src/test/testing-library.ts +++ b/code/core/src/test/testing-library.ts @@ -25,10 +25,13 @@ const testingLibrary = instrument( testingLibrary.screen = new Proxy(testingLibrary.screen, { get(target, prop, receiver) { - once.warn(dedent` - You are using Testing Library's \`screen\` object. Use \`within(canvasElement)\` instead. - More info: https://storybook.js.org/docs/writing-tests/interaction-testing?ref=error - `); + if (typeof window !== 'undefined' && globalThis.location?.href?.includes('viewMode=docs')) { + once.warn(dedent` + You are using Testing Library's \`screen\` object while the story is rendered in docs mode. This will likely lead to issues, as multiple stories are rendered in the same page and therefore screen will potentially find multiple elements. Use the \`canvas\` utility from the story context instead, which will scope the queries to each story's canvas. + + More info: https://storybook.js.org/docs/writing-tests/interaction-testing?ref=error#querying-the-canvas + `); + } return Reflect.get(target, prop, receiver); }, });