diff --git a/docs/snippets/common/test-runner-a11y-config.js.mdx b/docs/snippets/common/test-runner-a11y-config.js.mdx index d7afb9b77456..bf5f2b954fb3 100644 --- a/docs/snippets/common/test-runner-a11y-config.js.mdx +++ b/docs/snippets/common/test-runner-a11y-config.js.mdx @@ -4,7 +4,7 @@ const { injectAxe, checkA11y } = require('axe-playwright'); /* - * See https://storybook.js.org/docs/react/writing-tests/test-runner#test-hook-api-experimental + * See https://storybook.js.org/docs/react/writing-tests/test-runner#test-hook-api * to learn more about the test-runner hooks API. */ module.exports = { diff --git a/docs/snippets/common/test-runner-a11y-config.ts.mdx b/docs/snippets/common/test-runner-a11y-config.ts.mdx index 9339eb7e2ae0..a317cb46ad18 100644 --- a/docs/snippets/common/test-runner-a11y-config.ts.mdx +++ b/docs/snippets/common/test-runner-a11y-config.ts.mdx @@ -1,12 +1,11 @@ ```ts // .storybook/test-runner.ts -import { injectAxe, checkA11y } from 'axe-playwright'; - import type { TestRunnerConfig } from '@storybook/test-runner'; +import { injectAxe, checkA11y } from 'axe-playwright'; /* - * See https://storybook.js.org/docs/react/writing-tests/test-runner#test-hook-api-experimental + * See https://storybook.js.org/docs/react/writing-tests/test-runner#test-hook-api * to learn more about the test-runner hooks API. */ const a11yConfig: TestRunnerConfig = { diff --git a/docs/snippets/common/test-runner-a11y-configure.js.mdx b/docs/snippets/common/test-runner-a11y-configure.js.mdx index e7ddb352d5ea..23333177d9a3 100644 --- a/docs/snippets/common/test-runner-a11y-configure.js.mdx +++ b/docs/snippets/common/test-runner-a11y-configure.js.mdx @@ -6,7 +6,7 @@ const { injectAxe, checkA11y, configureAxe } = require('axe-playwright'); const { getStoryContext } = require('@storybook/test-runner'); /* - * See https://storybook.js.org/docs/react/writing-tests/test-runner#test-hook-api-experimental + * See https://storybook.js.org/docs/react/writing-tests/test-runner#test-hook-api * to learn more about the test-runner hooks API. */ module.exports = { diff --git a/docs/snippets/common/test-runner-a11y-configure.ts.mdx b/docs/snippets/common/test-runner-a11y-configure.ts.mdx index 8b1f4d31037e..8828a71bba0d 100644 --- a/docs/snippets/common/test-runner-a11y-configure.ts.mdx +++ b/docs/snippets/common/test-runner-a11y-configure.ts.mdx @@ -1,14 +1,13 @@ ```ts // .storybook/test-runner.ts -import { injectAxe, checkA11y, configureAxe } from 'axe-playwright'; - +import type { TestRunnerConfig } from '@storybook/test-runner'; import { getStoryContext } from '@storybook/test-runner'; -import type { TestRunnerConfig } from '@storybook/test-runner'; +import { injectAxe, checkA11y, configureAxe } from 'axe-playwright'; /* - * See https://storybook.js.org/docs/react/writing-tests/test-runner#test-hook-api-experimental + * See https://storybook.js.org/docs/react/writing-tests/test-runner#test-hook-api * to learn more about the test-runner hooks API. */ const a11yConfig: TestRunnerConfig = { diff --git a/docs/snippets/common/test-runner-a11y-disable.js.mdx b/docs/snippets/common/test-runner-a11y-disable.js.mdx index edb12dab0bfa..02a13b3efca9 100644 --- a/docs/snippets/common/test-runner-a11y-disable.js.mdx +++ b/docs/snippets/common/test-runner-a11y-disable.js.mdx @@ -1,12 +1,11 @@ ```js // .storybook/test-runner.js -const { injectAxe, checkA11y } = require('axe-playwright'); - const { getStoryContext } = require('@storybook/test-runner'); +const { injectAxe, checkA11y } = require('axe-playwright'); /* - * See https://storybook.js.org/docs/react/writing-tests/test-runner#test-hook-api-experimental + * See https://storybook.js.org/docs/react/writing-tests/test-runner#test-hook-api * to learn more about the test-runner hooks API. */ module.exports = { diff --git a/docs/snippets/common/test-runner-a11y-disable.ts.mdx b/docs/snippets/common/test-runner-a11y-disable.ts.mdx index 3297e8ea0b7b..986b8c09eaff 100644 --- a/docs/snippets/common/test-runner-a11y-disable.ts.mdx +++ b/docs/snippets/common/test-runner-a11y-disable.ts.mdx @@ -1,14 +1,13 @@ ```ts // .storybook/test-runner.ts -import { injectAxe, checkA11y } from 'axe-playwright'; - +import type { TestRunnerConfig } from '@storybook/test-runner'; import { getStoryContext } from '@storybook/test-runner'; -import type { TestRunnerConfig } from '@storybook/test-runner'; +import { injectAxe, checkA11y } from 'axe-playwright'; /* - * See https://storybook.js.org/docs/react/writing-tests/test-runner#test-hook-api-experimental + * See https://storybook.js.org/docs/react/writing-tests/test-runner#test-hook-api * to learn more about the test-runner hooks API. */ const a11yConfig: TestRunnerConfig = { diff --git a/docs/snippets/common/test-runner-helper-function.js.mdx b/docs/snippets/common/test-runner-helper-function.js.mdx index 6ce0e1bf4123..739f0034b59e 100644 --- a/docs/snippets/common/test-runner-helper-function.js.mdx +++ b/docs/snippets/common/test-runner-helper-function.js.mdx @@ -1,7 +1,7 @@ ```js // .storybook/test-runner.js -const { getStoryContext } = require('@storybook/test-runner'); +const { getStoryContext, waitForPageReady } = require('@storybook/test-runner'); module.exports = { // Hook that is executed before the test runner starts running tests @@ -23,6 +23,9 @@ module.exports = { // Get the entire context of a story, including parameters, args, argTypes, etc. const storyContext = await getStoryContext(page, context); + // This utility function is designed for image snapshot testing. It will wait for the page to be fully loaded, including all the async items (e.g., images, fonts, etc.). + await waitForPageReady(page); + // Add your configuration here. }, }; diff --git a/docs/snippets/common/test-runner-helper-function.ts.mdx b/docs/snippets/common/test-runner-helper-function.ts.mdx index 94a9824a68a0..eea475d13f24 100644 --- a/docs/snippets/common/test-runner-helper-function.ts.mdx +++ b/docs/snippets/common/test-runner-helper-function.ts.mdx @@ -2,8 +2,7 @@ // .storybook/test-runner.ts import type { TestRunnerConfig } from '@storybook/test-runner'; - -import { getStoryContext } from '@storybook/test-runner'; +import { getStoryContext, waitForPageReady } from '@storybook/test-runner'; const config: TestRunnerConfig = { // Hook that is executed before the test runner starts running tests @@ -25,6 +24,9 @@ const config: TestRunnerConfig = { // Get the entire context of a story, including parameters, args, argTypes, etc. const storyContext = await getStoryContext(page, context); + // This utility function is designed for image snapshot testing. It will wait for the page to be fully loaded, including all the async items (e.g., images, fonts, etc.). + await waitForPageReady(page); + // Add your configuration here. }, }; diff --git a/docs/writing-tests/accessibility-testing.md b/docs/writing-tests/accessibility-testing.md index d6dbba00d27a..4773ec8594b0 100644 --- a/docs/writing-tests/accessibility-testing.md +++ b/docs/writing-tests/accessibility-testing.md @@ -89,7 +89,7 @@ Out of the box, Storybook's accessibility addon includes a set of accessibility #### Global a11y configuration -If you need to dismiss an accessibility rule or modify its settings across all stories, you can add the following to your [storybook/preview.js](../configure/overview.md#configure-story-rendering): +If you need to dismiss an accessibility rule or modify its settings across all stories, you can add the following to your [`storybook/preview.js|ts`](../configure/overview.md#configure-story-rendering): @@ -170,7 +170,7 @@ Disable accessibility testing for stories or components by adding the following The most accurate way to check accessibility is manually on real devices. However, you can use automated tools to catch common accessibility issues. For example, [Axe](https://www.deque.com/axe/), on average, catches upwards to [57% of WCAG issues](https://www.deque.com/blog/automated-testing-study-identifies-57-percent-of-digital-accessibility-issues/) automatically. -These tools work by auditing the rendered DOM against heuristics based on [WCAG](https://www.w3.org/WAI/standards-guidelines/wcag/) rules and other industry-accepted best practices. You can then integrate these tools into your test automation pipeline using the Storybook [test runner](./test-runner.md#test-hook-api-experimental) and [axe-playwright](https://github.com/abhinaba-ghosh/axe-playwright). +These tools work by auditing the rendered DOM against heuristics based on [WCAG](https://www.w3.org/WAI/standards-guidelines/wcag/) rules and other industry-accepted best practices. You can then integrate these tools into your test automation pipeline using the Storybook [test runner](./test-runner.md#test-hook-api) and [axe-playwright](https://github.com/abhinaba-ghosh/axe-playwright). ### Setup @@ -190,7 +190,7 @@ Run the following command to install the required dependencies. -Add a new [configuration file](./test-runner.md#test-hook-api-experimental) inside your Storybook directory with the following inside: +Add a new [configuration file](./test-runner.md#test-hook-api) inside your Storybook directory with the following inside: @@ -205,7 +205,7 @@ Add a new [configuration file](./test-runner.md#test-hook-api-experimental) insi
-💡 `preRender` and `postRender` are convenient hooks that allow you to extend the test runner's default configuration. They are **experimental** and subject to changes. Read more about them [here](./test-runner.md#test-hook-api-experimental). +💡 `preRender` and `postRender` are convenient hooks that allow you to extend the test runner's default configuration. Read more about them [here](./test-runner.md#test-hook-api).
diff --git a/docs/writing-tests/test-runner.md b/docs/writing-tests/test-runner.md index e75bee68c549..ebecf03198d3 100644 --- a/docs/writing-tests/test-runner.md +++ b/docs/writing-tests/test-runner.md @@ -190,19 +190,19 @@ However, you might want to pair the test runner and Chromatic in some cases. ## Advanced configuration -### Test hook API (experimental) +### Test hook API The test-runner renders a story and executes its [play function](../writing-stories/play-function.md) if one exists. However, certain behaviors are impossible to achieve via the play function, which executes in the browser. For example, if you want the test-runner to take visual snapshots for you, this is possible via Playwright/Jest but must be executed in Node. The test-runner exports test hooks that can be overridden globally to enable use cases like visual or DOM snapshots. These hooks give you access to the test lifecycle _before_ and _after_ the story is rendered. Listed below are the available hooks and an overview of how to use them. -| Hook | Description | -| ------------ | -------------------------------------------------------------------------------------------------- | -| `prepare` | Prepares the browser for tests
`async prepare({ page, browserContext, testRunnerConfig }) {}` | -| `setup` | Executes once before all the tests run
`setup() {}` | -| `preRender` | Executes before a story is rendered
`async preRender(page, context) {}` | -| `postRender` | Executes after the story is rendered
`async postRender(page, context) {}` | +| Hook | Description | +| ------------ | ------------------------------------------------------------------------------------------------- | +| `prepare` | Prepares the browser for tests
`async prepare({ page, browserContext, testRunnerConfig }) {}` | +| `setup` | Executes once before all the tests run
`setup() {}` | +| `preRender` | Executes before a story is rendered
`async preRender(page, context) {}` | +| `postRender` | Executes after the story is rendered
`async postRender(page, context) {}` |