{"id":13726957,"url":"https://github.com/storybookjs/testing-react","last_synced_at":"2025-10-05T21:31:43.038Z","repository":{"id":37886959,"uuid":"347507312","full_name":"storybookjs/testing-react","owner":"storybookjs","description":"Testing utilities that allow you to reuse your Storybook stories in your React unit tests!","archived":true,"fork":false,"pushed_at":"2023-04-28T23:34:35.000Z","size":2106,"stargazers_count":591,"open_issues_count":2,"forks_count":24,"subscribers_count":9,"default_branch":"future","last_synced_at":"2025-09-08T08:16:12.257Z","etag":null,"topics":["react","storybook","testing","testing-library"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/storybookjs.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2021-03-14T00:07:31.000Z","updated_at":"2025-08-27T12:26:36.000Z","dependencies_parsed_at":"2023-07-25T01:02:01.915Z","dependency_job_id":"a024568c-d7ce-425d-ab15-2e68011781aa","html_url":"https://github.com/storybookjs/testing-react","commit_stats":{"total_commits":168,"total_committers":42,"mean_commits":4.0,"dds":0.5357142857142857,"last_synced_commit":"1c76519c6935976e41d6ae8e5244331dd3e4765a"},"previous_names":["storybookjs/react-testing","storybookjs/testing-utilities"],"tags_count":40,"template":false,"template_full_name":null,"purl":"pkg:github/storybookjs/testing-react","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/storybookjs%2Ftesting-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/storybookjs%2Ftesting-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/storybookjs%2Ftesting-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/storybookjs%2Ftesting-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/storybookjs","download_url":"https://codeload.github.com/storybookjs/testing-react/tar.gz/refs/heads/future","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/storybookjs%2Ftesting-react/sbom","scorecard":{"id":854419,"data":{"date":"2025-08-11","repo":{"name":"github.com/storybookjs/testing-react","commit":"1c76519c6935976e41d6ae8e5244331dd3e4765a"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":2.7,"checks":[{"name":"Dangerous-Workflow","score":10,"reason":"no dangerous workflow patterns detected","details":null,"documentation":{"short":"Determines if the project's GitHub Action workflows avoid dangerous patterns.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#dangerous-workflow"}},{"name":"Maintained","score":0,"reason":"project is archived","details":["Warn: Repository is archived."],"documentation":{"short":"Determines if the project is \"actively maintained\".","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#maintained"}},{"name":"Packaging","score":-1,"reason":"packaging workflow not detected","details":["Warn: no GitHub/GitLab publishing workflow detected."],"documentation":{"short":"Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#packaging"}},{"name":"Token-Permissions","score":0,"reason":"detected GitHub workflow tokens with excessive permissions","details":["Warn: no topLevel permission defined: .github/workflows/linear-export.yml:1","Warn: no topLevel permission defined: .github/workflows/release.yml:1","Info: no jobLevel write permissions found"],"documentation":{"short":"Determines if the project's workflows follow the principle of least privilege.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#token-permissions"}},{"name":"Code-Review","score":2,"reason":"Found 2/10 approved changesets -- score normalized to 2","details":null,"documentation":{"short":"Determines if the project requires human code review before pull requests (aka merge requests) are merged.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#code-review"}},{"name":"Binary-Artifacts","score":10,"reason":"no binaries found in the repo","details":null,"documentation":{"short":"Determines if the project has generated executable (binary) artifacts in the source repository.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#binary-artifacts"}},{"name":"Pinned-Dependencies","score":0,"reason":"dependency not pinned by hash detected -- score normalized to 0","details":["Warn: third-party GitHubAction not pinned by hash: .github/workflows/linear-export.yml:17: update your workflow using https://app.stepsecurity.io/secureworkflow/storybookjs/testing-react/linear-export.yml/future?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release.yml:10: update your workflow using https://app.stepsecurity.io/secureworkflow/storybookjs/testing-react/release.yml/future?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release.yml:16: update your workflow using https://app.stepsecurity.io/secureworkflow/storybookjs/testing-react/release.yml/future?enable=pin","Warn: third-party GitHubAction not pinned by hash: .github/workflows/release.yml:21: update your workflow using https://app.stepsecurity.io/secureworkflow/storybookjs/testing-react/release.yml/future?enable=pin","Info:   0 out of   2 GitHub-owned GitHubAction dependencies pinned","Info:   0 out of   2 third-party GitHubAction dependencies pinned"],"documentation":{"short":"Determines if the project has declared and pinned the dependencies of its build process.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#pinned-dependencies"}},{"name":"CII-Best-Practices","score":0,"reason":"no effort to earn an OpenSSF best practices badge detected","details":null,"documentation":{"short":"Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#cii-best-practices"}},{"name":"Fuzzing","score":0,"reason":"project is not fuzzed","details":["Warn: no fuzzer integrations found"],"documentation":{"short":"Determines if the project uses fuzzing.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#fuzzing"}},{"name":"License","score":10,"reason":"license file detected","details":["Info: project has a license file: LICENSE:0","Info: FSF or OSI recognized license: MIT License: LICENSE:0"],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#license"}},{"name":"Signed-Releases","score":-1,"reason":"no releases found","details":null,"documentation":{"short":"Determines if the project cryptographically signs release artifacts.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#signed-releases"}},{"name":"Security-Policy","score":0,"reason":"security policy file not detected","details":["Warn: no security policy file detected","Warn: no security file to analyze","Warn: no security file to analyze","Warn: no security file to analyze"],"documentation":{"short":"Determines if the project has published a security policy.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#security-policy"}},{"name":"Branch-Protection","score":0,"reason":"branch protection not enabled on development/release branches","details":["Warn: branch protection not enabled for branch 'future'","Warn: branch protection not enabled for branch 'main'"],"documentation":{"short":"Determines if the default and release branches are protected with GitHub's branch protection settings.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#branch-protection"}},{"name":"SAST","score":0,"reason":"SAST tool is not run on all commits -- score normalized to 0","details":["Warn: 0 commits out of 24 are checked with a SAST tool"],"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#sast"}},{"name":"Vulnerabilities","score":0,"reason":"59 existing vulnerabilities detected","details":["Warn: Project is vulnerable to: GHSA-968p-4wvh-cqc8","Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92","Warn: Project is vulnerable to: GHSA-qwcr-r2fm-qrc7","Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw","Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg","Warn: Project is vulnerable to: GHSA-pxg6-pf52-xh8x","Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275","Warn: Project is vulnerable to: GHSA-ghr5-ch3p-vcr6","Warn: Project is vulnerable to: GHSA-67mh-4wv8-2f99","Warn: Project is vulnerable to: GHSA-rv95-896h-c2vc","Warn: Project is vulnerable to: GHSA-qw6h-vgh9-j6wx","Warn: Project is vulnerable to: GHSA-jchw-25xp-jwwc","Warn: Project is vulnerable to: GHSA-cxjh-pqwp-8mfp","Warn: Project is vulnerable to: GHSA-fjxv-7rqg-78g4","Warn: Project is vulnerable to: GHSA-rc47-6667-2j5j","Warn: Project is vulnerable to: GHSA-c7qv-q95q-8v27","Warn: Project is vulnerable to: GHSA-4www-5p9h-95mh","Warn: Project is vulnerable to: GHSA-9gqv-wp59-fq42","Warn: Project is vulnerable to: GHSA-78xj-cgh5-2h22","Warn: Project is vulnerable to: GHSA-2p57-rm9w-gvfp","Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h","Warn: Project is vulnerable to: GHSA-4wx3-54gh-9fr9","Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv","Warn: Project is vulnerable to: GHSA-mwcw-c2x4-8c55","Warn: Project is vulnerable to: GHSA-rp65-9cf3-cjxr","Warn: Project is vulnerable to: GHSA-76c9-3jph-rj3q","Warn: Project is vulnerable to: GHSA-9wv6-86v2-598j","Warn: Project is vulnerable to: GHSA-rhx6-c78j-4q9w","Warn: Project is vulnerable to: GHSA-7fh5-64p2-3v2j","Warn: Project is vulnerable to: GHSA-gcx4-mw62-g8wm","Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw","Warn: Project is vulnerable to: GHSA-m6fv-jmcg-4jfg","Warn: Project is vulnerable to: GHSA-76p7-773f-r4q5","Warn: Project is vulnerable to: GHSA-cm22-4g7w-348p","Warn: Project is vulnerable to: GHSA-w5hq-hm5m-4548","Warn: Project is vulnerable to: GHSA-f5x3-32g6-xq36","Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3","Warn: Project is vulnerable to: GHSA-hc6q-2mpp-qw7j","Warn: Project is vulnerable to: GHSA-4vvj-4cpr-p986","Warn: Project is vulnerable to: GHSA-wr3j-pwj9-hqq6","Warn: Project is vulnerable to: GHSA-4v9v-hfq4-rm2v","Warn: Project is vulnerable to: GHSA-9jgg-88mc-972h","Warn: Project is vulnerable to: GHSA-j8xg-fqg3-53r7","Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q","Warn: Project is vulnerable to: GHSA-h5c3-5r3r-rr8q","Warn: Project is vulnerable to: GHSA-rmvr-2pp2-xj38","Warn: Project is vulnerable to: GHSA-xx4v-prfh-6cgc","Warn: Project is vulnerable to: GHSA-x9w5-v3q2-3rhw","Warn: Project is vulnerable to: GHSA-434g-2637-qmqr","Warn: Project is vulnerable to: GHSA-49q7-c7j4-3p7m","Warn: Project is vulnerable to: GHSA-977x-g7h5-7qgw","Warn: Project is vulnerable to: GHSA-f7q4-pwc6-w24p","Warn: Project is vulnerable to: GHSA-fc9h-whq2-v747","Warn: Project is vulnerable to: GHSA-vjh7-7g9h-fjfh","Warn: Project is vulnerable to: GHSA-5fw9-fq32-wv5p","Warn: Project is vulnerable to: GHSA-h7cp-r72f-jxh6","Warn: Project is vulnerable to: GHSA-v62p-rq8g-8h59","Warn: Project is vulnerable to: GHSA-p8p7-x288-28g6","Warn: Project is vulnerable to: GHSA-52f5-9888-hmc6"],"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#vulnerabilities"}}]},"last_synced_at":"2025-08-23T23:28:17.857Z","repository_id":37886959,"created_at":"2025-08-23T23:28:17.858Z","updated_at":"2025-08-23T23:28:17.858Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":278525535,"owners_count":26001321,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-05T02:00:06.059Z","response_time":54,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["react","storybook","testing","testing-library"],"created_at":"2024-08-03T01:03:33.124Z","updated_at":"2025-10-05T21:31:42.678Z","avatar_url":"https://github.com/storybookjs.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://user-images.githubusercontent.com/1671563/111436322-21b31180-8702-11eb-943f-93b5a0b02b50.png\" alt=\"Storybook React Testing\" width=\"100\" /\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003eTesting utilities that allow you to reuse your stories in your unit tests\u003c/p\u003e\n\n\u003cbr/\u003e\n\n## ⚠️ Attention!\n\nIf you're using Storybook 7, you need to read this section. Otherwise, feel free to skip it.\n\n`@storybook/testing-react` has been promoted to a first-class Storybook functionality. This means that **you no longer need this package**. Instead, you can import the same utilities, but from the `@storybook/react` package. Additionally, the internals of `composeStories` and `composeStory` have been revamped, so the way a story is composed is more accurate. The `@storybook/testing-react` package will be deprecated, so we recommend you to migrate.\n\nPlease do the following:\n\n1. Uninstall this package\n2. Update your imports\n\n```diff\n- import { composeStories } from '@storybook/testing-react';\n+ import { composeStories } from '@storybook/react';\n\n// OR\n- import { setProjectAnnotations } from '@storybook/testing-react';\n+ import { setProjectAnnotations } from '@storybook/react';\n```\n\n## The problem\n\nYou are using [Storybook](https://storybook.js.org/) for your components and writing tests for them with [jest](https://jestjs.io/), most likely alongside [Enzyme](https://enzymejs.github.io/enzyme/) or [React testing library](https://testing-library.com/). In your Storybook stories, you already defined the scenarios of your components. You also set up the necessary decorators (theming, routing, state management, etc.) to make them all render correctly. When you're writing tests, you also end up defining scenarios of your components, as well as setting up the necessary decorators. By doing the same thing twice, you feel like you're spending too much effort, making writing and maintaining stories/tests become less like fun and more like a burden.\n\n## The solution\n\n`@storybook/testing-react` is a solution to reuse your Storybook stories in your React tests. By reusing your stories in your tests, you have a catalog of component scenarios ready to be tested. All [args](https://storybook.js.org/docs/react/writing-stories/args) and [decorators](https://storybook.js.org/docs/react/writing-stories/decorators) from your [story](https://storybook.js.org/docs/react/api/csf#named-story-exports) and its [meta](https://storybook.js.org/docs/react/api/csf#default-export), and also [global decorators](https://storybook.js.org/docs/react/writing-stories/decorators#global-decorators), will be composed by this library and returned to you in a simple component. This way, in your unit tests, all you have to do is select which story you want to render, and all the necessary setup will be already done for you. This is the missing piece that allows for better shareability and maintenance between writing tests and writing Storybook stories.\n\n## Installation\n\nThis library should be installed as one of your project's `devDependencies`:\n\nvia [npm](https://www.npmjs.com/)\n\n```\nnpm install --save-dev @storybook/testing-react\n```\n\nor via [yarn](https://classic.yarnpkg.com/)\n\n```\nyarn add --dev @storybook/testing-react\n```\n\n## Setup\n\n### Storybook 6 and Component Story Format\n\nThis library requires you to be using Storybook version 6, [Component Story Format (CSF)](https://storybook.js.org/docs/react/api/csf) and [hoisted CSF annotations](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#hoisted-csf-annotations), which is the recommended way to write stories since Storybook 6.\n\nEssentially, if you use Storybook 6 and your stories look similar to this, you're good to go!\n\n```jsx\n// CSF: default export (meta) + named exports (stories)\nexport default {\n  title: 'Example/Button',\n  component: Button,\n};\n\nconst Primary = args =\u003e \u003cButton {...args} /\u003e; // or with Template.bind({})\nPrimary.args = {\n  primary: true,\n};\n```\n\n### Global config\n\n\u003e This is an optional step. If you don't have [global decorators](https://storybook.js.org/docs/react/writing-stories/decorators#global-decorators), there's no need to do this. However, if you do, this is a necessary step for your global decorators to be applied.\n\nIf you have global decorators/parameters/etc and want them applied to your stories when testing them, you first need to set this up. You can do this by adding to or creating a jest [setup file](https://jestjs.io/docs/configuration#setupfiles-array):\n\n```tsx\n// setupFile.js \u003c-- this will run before the tests in jest.\nimport { setProjectAnnotations } from '@storybook/testing-react';\nimport * as globalStorybookConfig from './.storybook/preview'; // path of your preview.js file\n\nsetProjectAnnotations(globalStorybookConfig);\n```\n\nFor the setup file to be picked up, you need to pass it as an option to jest in your test command:\n\n```json\n// package.json\n{\n  \"test\": \"react-scripts test --setupFiles ./setupFile.js\"\n}\n```\n\n## Usage\n\n### `composeStories`\n\n`composeStories` will process all stories from the component you specify, compose args/decorators in all of them and return an object containing the composed stories.\n\nIf you use the composed story (e.g. PrimaryButton), the component will render with the args that are passed in the story. However, you are free to pass any props on top of the component, and those props will override the default values passed in the story's args.\n\n```tsx\nimport { render, screen } from '@testing-library/react';\nimport { composeStories } from '@storybook/testing-react';\nimport * as stories from './Button.stories'; // import all stories from the stories file\n\n// Every component that is returned maps 1:1 with the stories, but they already contain all decorators from story level, meta level and global level.\nconst { Primary, Secondary } = composeStories(stories);\n\ntest('renders primary button with default args', () =\u003e {\n  render(\u003cPrimary /\u003e);\n  const buttonElement = screen.getByText(\n    /Text coming from args in stories file!/i\n  );\n  expect(buttonElement).not.toBeNull();\n});\n\ntest('renders primary button with overriden props', () =\u003e {\n  render(\u003cPrimary\u003eHello world\u003c/Primary\u003e); // you can override props and they will get merged with values from the Story's args\n  const buttonElement = screen.getByText(/Hello world/i);\n  expect(buttonElement).not.toBeNull();\n});\n```\n\n### `composeStory`\n\nYou can use `composeStory` if you wish to apply it for a single story rather than all of your stories. You need to pass the meta (default export) as well.\n\n```tsx\nimport { render, screen } from '@testing-library/react';\nimport { composeStory } from '@storybook/testing-react';\nimport Meta, { Primary as PrimaryStory } from './Button.stories';\n\n// Returns a component that already contain all decorators from story level, meta level and global level.\nconst Primary = composeStory(PrimaryStory, Meta);\n\ntest('onclick handler is called', () =\u003e {\n  const onClickSpy = jest.fn();\n  render(\u003cPrimary onClick={onClickSpy} /\u003e);\n  const buttonElement = screen.getByRole('button');\n  buttonElement.click();\n  expect(onClickSpy).toHaveBeenCalled();\n});\n```\n\n### setting project annotations to `composeStory` or `composeStories`\n\n`setProjectAnnotations` is intended to apply all the global configurations that are defined in your `.storybook/preview.js` file. This means that you might get unintended side-effects in case your preview.js imports certain mocks or other things you actually do not want to execute in your test files. If this is your case and you still need to provide some annotation overrides (decorators, parameters, etc) that normally come from preview.js, you can pass them directly as the optional last argument of both `composeStories` and `composeStory` functions:\n\n**composeStories**:\n\n```ts\nimport * as stories from './Button.stories'\n\n// default behavior: uses overrides from setProjectAnnotations\nconst { Primary } = composeStories(stories)\n\n// custom behavior: uses overrides defined locally\nconst { Primary } = composeStories(stories, { decorators: [...], globalTypes: {...}, parameters: {...})\n```\n\n**composeStory**:\n\n```ts\nimport * as stories from './Button.stories'\n\n// default behavior: uses overrides from setProjectAnnotations\nconst Primary = composeStory(stories.Primary, stories.default)\n\n// custom behavior: uses overrides defined locally\nconst Primary = composeStory(stories.Primary, stories.default, { decorators: [...], globalTypes: {...}, parameters: {...})\n```\n\n### Reusing story properties\n\nThe components returned by `composeStories` or `composeStory` not only can be rendered as React components, but also come with the combined properties from story, meta and global configuration. This means that if you want to access `args` or `parameters`, for instance, you can do so:\n\n```tsx\nimport { render, screen } from '@testing-library/react';\nimport { composeStory } from '@storybook/testing-react';\nimport * as stories from './Button.stories';\n\nconst { Primary } = composeStories(stories);\n\ntest('reuses args from composed story', () =\u003e {\n  render(\u003cPrimary /\u003e);\n\n  const buttonElement = screen.getByRole('button');\n  // Testing against values coming from the story itself! No need for duplication\n  expect(buttonElement.textContent).toEqual(Primary.args.children);\n});\n```\n\n### CSF3\n\nStorybook 6.4 released a [new version of CSF](https://storybook.js.org/blog/component-story-format-3-0/), where the story can also be an object. This is supported in `@storybook/testing-react`, but you have to match one of the requisites:\n\n1 - Your **story** has a `render` method\n2 - Or your **meta** has a `render` method\n3 - Or your **meta** contains a `component` property\n\n```js\n// Example 1: Meta with component property\nexport default {\n  title: 'Button',\n  component: Button, // \u003c-- This is strictly necessary\n};\n\n// Example 2: Meta with render method:\nexport default {\n  title: 'Button',\n  render: args =\u003e \u003cButton {...args} /\u003e,\n};\n\n// Example 3: Story with render method:\nexport const Primary = {\n  render: args =\u003e \u003cButton {...args} /\u003e,\n};\n```\n\n#### Interactions with play function\n\nStorybook 6.4 also brings a new function called `play`, where you can write automated interactions to the story.\n\nIn `@storybook/testing-react`, the `play` function does not run automatically for you, but rather comes in the returned component, and you can execute it as you please.\n\nConsider the following example:\n\n```tsx\nexport const InputFieldFilled: Story\u003cInputFieldProps\u003e = {\n  play: async ({ canvasElement }) =\u003e {\n    const canvas = within(canvasElement);\n    await userEvent.type(canvas.getByRole('textbox'), 'Hello world!');\n  },\n};\n```\n\nYou can use the play function like this:\n\n```tsx\nconst { InputFieldFilled } = composeStories(stories);\n\ntest('renders with play function', async () =\u003e {\n  const { container } = render(\u003cInputFieldFilled /\u003e);\n\n  // pass container as canvasElement and play an interaction that fills the input\n  await InputFieldFilled.play({ canvasElement: container });\n\n  const input = screen.getByRole('textbox') as HTMLInputElement;\n  expect(input.value).toEqual('Hello world!');\n});\n```\n\n## Batch testing all stories from a file\n\nRather than specifying test by test manually, you can also run automated tests by using [test.each](https://jestjs.io/docs/api#testeachtablename-fn-timeout) in combination with `composeStories`. Here's an example for doing snapshot tests in all stories from a file:\n\n```js\nimport * as stories from './Button.stories';\n\nconst testCases = Object.values(composeStories(stories)).map((Story) =\u003e [\n  // The ! is necessary in Typescript only, as the property is part of a partial type\n  Story.storyName!,\n  Story,\n]);\n// Batch snapshot testing\ntest.each(testCases)('Renders %s story', async (_storyName, Story) =\u003e {\n  const tree = await render(\u003cStory /\u003e);\n  expect(tree.baseElement).toMatchSnapshot();\n});\n```\n\n## Typescript\n\n`@storybook/testing-react` is typescript ready and provides autocompletion to easily detect all stories of your component:\n\n![component autocompletion](./assets/autocompletion-compose.png)\n\nIt also provides the props of the components just as you would normally expect when using them directly in your tests:\n\n![props autocompletion](./assets/autocompletion-props.png)\n\nType inference is only possible in projects that have either `strict` or `strictBindApplyCall` modes set to `true` in their `tsconfig.json` file. You also need a TypeScript version over 4.0.0. If you don't have proper type inference, this might be the reason.\n\n```jsonc\n// tsconfig.json\n{\n  \"compilerOptions\": {\n    // ...\n    \"strict\": true, // You need either this option\n    \"strictBindCallApply\": true // or this option\n    // ...\n  }\n  // ...\n}\n```\n\n### Disclaimer\n\nFor the types to be automatically picked up, your stories must be typed. See an example:\n\n```tsx\nimport React from 'react';\nimport { Story, Meta } from '@storybook/react';\n\nimport { Button, ButtonProps } from './Button';\n\nexport default {\n  title: 'Components/Button',\n  component: Button,\n} as Meta;\n\n// Story\u003cProps\u003e is the key piece needed for typescript validation\nconst Template: Story\u003cButtonProps\u003e = args =\u003e \u003cButton {...args} /\u003e;\n\nexport const Primary = Template.bind({});\nPrimary.args = {\n  children: 'foo',\n  size: 'large',\n};\n```\n\n## License\n\n[MIT](./LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstorybookjs%2Ftesting-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fstorybookjs%2Ftesting-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstorybookjs%2Ftesting-react/lists"}