From d45feb99e7d28e48c727df8bf45c81dd0b3b0fe2 Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Fri, 7 Oct 2022 13:39:07 +0200 Subject: [PATCH] undo is-test-runner function for now --- .../is-test-runner.js | 4 +- .storybook/preview.js | 2 +- README.md | 41 ++++++++----------- package.json | 4 +- stories/atoms/Button.stories.js | 2 +- 5 files changed, 22 insertions(+), 31 deletions(-) rename is-test-runner.js => .storybook/is-test-runner.js (58%) diff --git a/is-test-runner.js b/.storybook/is-test-runner.js similarity index 58% rename from is-test-runner.js rename to .storybook/is-test-runner.js index 736c63cf..58b532bf 100644 --- a/is-test-runner.js +++ b/.storybook/is-test-runner.js @@ -2,11 +2,9 @@ * Returns whether the story is rendering inside of the Storybook test runner. */ export function isTestRunner() { - const isTestRunnerInNode = process?.env?.STORYBOOK_TEST_RUNNER === 'true'; - const isTestRunnerInBrowser = !!( + return !!( typeof window !== 'undefined' && window && window.navigator.userAgent.match(/StorybookTestRunner/) ); - return isTestRunnerInBrowser || isTestRunnerInNode; } diff --git a/.storybook/preview.js b/.storybook/preview.js index 7d9921dd..9cfd9258 100644 --- a/.storybook/preview.js +++ b/.storybook/preview.js @@ -1,4 +1,4 @@ -import { isTestRunner } from '../is-test-runner'; +import { isTestRunner } from './is-test-runner'; const withSkippableTests = (StoryFn, { parameters }) => { if (parameters.test?.skip && isTestRunner()) { diff --git a/README.md b/README.md index c8d13672..5d2b7346 100644 --- a/README.md +++ b/README.md @@ -29,7 +29,7 @@ Storybook test runner turns all of your stories into executable tests. - [Render lifecycle](#render-lifecycle) - [Utility functions](#utility-functions) - [getStoryContext](#getstorycontext) - - [isTestRunner](#istestrunner) + - [StorybookTestRunner user agent](#storybooktestrunner-user-agent) - [Troubleshooting](#troubleshooting) - [The error output in the CLI is too short](#the-error-output-in-the-cli-is-too-short) - [The test runner seems flaky and keeps timing out](#the-test-runner-seems-flaky-and-keeps-timing-out) @@ -527,35 +527,28 @@ module.exports = { }; ``` -#### isTestRunner +#### StorybookTestRunner user agent -The `isTestRunner` function can be used to determine if a story is rendering in the context of the test runner. This might be useful if you want to disable certain features in your stories when running in the test runner, though it's likely an edge case. +The test-runner adds a `StorybookTestRunner` entry to the browser's user agent. You can use it to determine if a story is rendering in the context of the test runner. This might be useful if you want to disable certain features in your stories when running in the test runner, though it's likely an edge case. ```js -import { isTestRunner } from '@storybook/test-runner/is-test-runner'; -export const MyStory = () => ( -
-

Is this story running in the test runner?

-

{isTestRunner() ? 'Yes' : 'No'}

-
-); +export const MyStory = () => { + const isTestRunner = window.navigator.userAgent.match(/StorybookTestRunner/); + return ( +
+

Is this story running in the test runner?

+

{isTestRunner ? 'Yes' : 'No'}

+
+ ); +}; ``` -The result of `isTestRunner()` will be true in the following scenarios: - -1. In the browser, when the story is rendered while running the test runner. This is only applicable in the following scenarios: - - - inside of a render/template function - - inside of a play function - - inside of preview.js - - inside any other code that is executed in the browser +Given that this check is happening in the browser, it is only applicable in the following scenarios: -2. In node, if you prepend your Storybook script with `STORYBOOK_TEST_RUNNER=true`.\* - -> **Warning** -> -> - Currently, given that you have to run Storybook before the test-runner, the `isTestRunner` function will return `false` when running in node even if you are running the test-runner, unless you set the STORYBOOK_TEST_RUNNER environment variable. An example of execution in node is if you're using that function to set parameters or args, or inside of main.js. -> In the future, once the test-runner can spawn Storybook, this will no longer be the case. +- inside of a render/template function of a story +- inside of a play function +- inside of preview.js +- inside any other code that is executed in the browser ## Troubleshooting diff --git a/package.json b/package.json index b017e276..619b8e7c 100644 --- a/package.json +++ b/package.json @@ -33,8 +33,8 @@ "scripts": { "clean": "rimraf ./dist", "buildBabel": "concurrently \"yarn buildBabel:cjs\" \"yarn buildBabel:esm\"", - "buildBabel:cjs": "babel ./src -d ./dist/cjs --extensions \".js,.jsx,.ts,.tsx\" --copy-files is-test-runner.js", - "buildBabel:esm": "babel ./src -d ./dist/esm --env-name esm --extensions \".js,.jsx,.ts,.tsx\" --copy-files is-test-runner.js", + "buildBabel:cjs": "babel ./src -d ./dist/cjs --extensions \".js,.jsx,.ts,.tsx\"", + "buildBabel:esm": "babel ./src -d ./dist/esm --env-name esm --extensions \".js,.jsx,.ts,.tsx\"", "buildTsc": "tsc --declaration --emitDeclarationOnly --outDir ./dist/ts", "prebuild": "yarn clean", "build": "concurrently \"yarn buildBabel\" \"yarn buildTsc\"", diff --git a/stories/atoms/Button.stories.js b/stories/atoms/Button.stories.js index e2ac6151..2291dc2a 100644 --- a/stories/atoms/Button.stories.js +++ b/stories/atoms/Button.stories.js @@ -1,6 +1,6 @@ import React from 'react'; import { expect } from '@storybook/jest'; -import { isTestRunner } from '../../is-test-runner'; +import { isTestRunner } from '../../.storybook/is-test-runner'; import { within, waitFor, userEvent, waitForElementToBeRemoved } from '@storybook/testing-library'; import { Button } from './Button';