Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Docs: Fix conditional rendering for Unit testing #24600

Merged
merged 1 commit into from
Oct 27, 2023
Merged

Docs: Fix conditional rendering for Unit testing #24600

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23 changes: 17 additions & 6 deletions docs/writing-tests/stories-in-unit-tests.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -172,33 +172,44 @@ If you intend to test multiple stories in a single test, use the `composeStories

Storybook provides community-led addons for other frameworks like [Vue 2](https://storybook.js.org/addons/@storybook/testing-vue) and [Angular](https://storybook.js.org/addons/@storybook/testing-angular). However, these addons still lack support for the latest stable Storybook release. If you're interested in helping out, we recommend reaching out to the maintainers using the default communication channels (GitHub and [Discord server](https://discord.com/channels/486522875931656193/839297503446695956)).

### The args are not being passed to the test

<IfRenderer renderer='react'>

### The args are not being passed to the test

The components returned by `composeStories` or `composeStory` not only can be rendered as React components but also come with the combined properties from the story, meta, and global configuration. This means that if you want to access args or parameters, for instance, you can do so:

<!-- prettier-ignore-start -->

<CodeSnippets
paths={[
'react/reuse-args-test.js.mdx',
'react/reuse-args-test.ts.mdx',
]}
/>

<!-- prettier-ignore-end -->

</IfRenderer>

<IfRenderer renderer='vue'>

When using the `composeStories` or `composeStory` functions, the components being rendered will have a combination of properties from the story, meta, and global configuration. Therefore, if you need to access the args or parameters, you can do so as follows:
### The args are not being passed to the test

</IfRenderer>
When using the `composeStories` or `composeStory` functions, the components being rendered will have a combination of properties from the story, meta, and global configuration. Therefore, if you need to access the args or parameters, you can do so as follows:

<!-- prettier-ignore-start -->

<CodeSnippets
paths={[
'react/reuse-args-test.js.mdx',
'react/reuse-args-test.ts.mdx',
'vue/reuse-args-test.3.js.mdx',
'vue/reuse-args-test.3.ts.mdx',
]}
/>

<!-- prettier-ignore-end -->

</IfRenderer>

#### Learn about other UI tests

- [Test runner](./test-runner.md) to automate test execution
Expand Down
Loading