Docs: Further improvements #32166
Docs: Further improvements #32166
Conversation
kylegach
added
patch:yes
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
|
View your CI Pipeline Execution ↗ for commit f148fae
☁️ Nx Cloud last updated this comment at |
docs/writing-stories/mocking-data-and-modules/mocking-modules.mdx
Outdated
Show resolved
Hide resolved
jonniebigodes
left a comment
jonniebigodes
left a comment
There was a problem hiding this comment.
Left some items for you to look into when you can. Approving to unblock you.
| sb.mock('../lib/session.ts', { spy: true }); | ||
| // 👇 Automatically spies on all exports from the `uuid` package in `node_modules` | ||
| sb.mock('uuid', { spy: true }); | ||
| <CodeSnippets path="automock-register-spy.md" /> |
There was a problem hiding this comment.
@kylegach any particular reason why we're not wrapping the snippets with {/* prettier-ignore-start */} and {/* prettier-ignore-end */}?
There was a problem hiding this comment.
It's unnecessary after we switched the site to Next.js.
| ``` | ||
|
|
||
| ```js filename="AuthButton.stories.js" renderer="common" language="js" | ||
| import { expect } from 'storybook/test'; |
There was a problem hiding this comment.
@kylegach, the JS variants are not similar to the TS variants. There's a missing mocked import from storybook/test. Also, the uuidv4 should be wrapped in the mocked function call.
There was a problem hiding this comment.
The mocked import and function call is only needed for types. So I kept the JS ones simplified.
Docs: Further improvements (cherry picked from commit 84ea113)
github-actions
bot
added
the
patch:done
ndelangen
removed
the
patch:yes
Continues #32128
Documentation
MIGRATION.MD
Checklist for Maintainers
When this PR is ready for testing, make sure to add
ci:normal,ci:mergedorci:dailyGH label to it to run a specific set of sandboxes. The particular set of sandboxes can be found incode/lib/cli-storybook/src/sandbox-templates.tsMake sure this PR contains one of the labels below:
Available labels
bug: Internal changes that fixes incorrect behavior.maintenance: User-facing maintenance tasks.dependencies: Upgrading (sometimes downgrading) dependencies.build: Internal-facing build tooling & test updates. Will not show up in release changelog.cleanup: Minor cleanup style change. Will not show up in release changelog.documentation: Documentation only changes. Will not show up in release changelog.feature request: Introducing a new feature.BREAKING CHANGE: Changes that break compatibility in some way with current major version.other: Changes that don't fit in the above categories.Greptile Summary
This PR continues the documentation work from #32128 by adding comprehensive documentation for Storybook's new automocking feature introduced in version 9.1. The changes include:
New Documentation Snippets:
sb.mock({ spy: true })sb.mock()__mocks__directoriesmockedutility in stories withbeforeEachhooks and play functionsMajor Documentation Update:
The automocking feature leverages the
sb.mock()utility to simplify module mocking through three approaches: spy-only (recommended), fully automocked, and mock files. This represents a significant improvement over previous manual mocking methods by providing build-time module analysis and seamless integration with Vite/Webpack builders. The documentation follows Storybook's standards with framework-agnostic examples supporting both TypeScript and JavaScript users across Angular, React, Vue, Svelte, and Web Components.Confidence score: 4/5
mockedutility usage patterns between TypeScript/JavaScript examples that could cause confusionmockedwrapper usageContext used:
Context - When documenting code snippets, ensure to include Svelte CSF and CSF examples, and also include JS and TypeScript variants. (link)