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.

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

Docs: Module mocking, and more #26858

Merged
merged 48 commits into from May 6, 2024
Merged
Show file tree
Hide file tree
Changes from 18 commits
Commits
Show all changes
48 commits
Select commit Hold shift + click to select a range
1efccbe
WIP
kylegach Apr 15, 2024
0242371
Split into 3 pages
kylegach Apr 16, 2024
ff3f2e9
Add Modules section to Next.js docs
JReinhold Apr 16, 2024
92e1382
More mocking content
kylegach Apr 16, 2024
75b0820
Updates for Next.js
kylegach Apr 16, 2024
299a2c2
Simplify Building pages with Storybook guide
kylegach Apr 16, 2024
ec6742b
Update Decorators and Interaction tests pages
kylegach Apr 17, 2024
abc9b7c
Add missing TODOs
kylegach Apr 17, 2024
194a9bc
Add vite example
kylegach Apr 17, 2024
f2f4d13
clarify mock->original import limitations.
JReinhold Apr 17, 2024
e7c0676
add paragraph on mocking external modules.
JReinhold Apr 17, 2024
5d8ee28
add docs on `beforeEach`, `cleanup`, `parameters.test`
JReinhold Apr 17, 2024
4faf1ae
simplify subpath example in nextjs
JReinhold Apr 17, 2024
2ac03c4
Address feedback
kylegach Apr 18, 2024
b1da9c9
add getPackageAliases example
JReinhold Apr 18, 2024
71a4cea
add examples to next mock docs
JReinhold Apr 18, 2024
5bab73a
improve documentation for parameters.test.dangerouslyIgnoreUnhandledE…
JReinhold Apr 18, 2024
46c31eb
remove docs on default router and navigation contexts
JReinhold Apr 18, 2024
eef3290
add reasons for aliases in nextjs+jest
JReinhold Apr 18, 2024
f88bea5
Add back nextjs router/navigation override instructions
kylegach Apr 19, 2024
3f7e44c
Improve MSW snippets
kylegach Apr 19, 2024
8eaeb94
Address MSW snippets feedback
kylegach Apr 19, 2024
f4914e3
Prettify snippets
kylegach Apr 19, 2024
cf2be73
Add new actions to the bottom of the panel and auto scroll
kasperpeulen Apr 17, 2024
42773e3
Address review
kasperpeulen Apr 17, 2024
e850d36
add cache.mock entrypoint to nextjs
JReinhold Apr 17, 2024
401fd26
Try another mock naming convention
kasperpeulen Apr 16, 2024
9920353
Bind this
kasperpeulen Apr 16, 2024
b55673f
Update snapshot
kasperpeulen Apr 16, 2024
a033167
Fix name
kasperpeulen Apr 16, 2024
537fbb2
Hide some junk of next for nwo
kasperpeulen Apr 16, 2024
7cacdfa
Update code/frameworks/nextjs/src/export-mocks/navigation/index.ts
kasperpeulen Apr 16, 2024
af31a1f
Update code/frameworks/nextjs/src/export-mocks/navigation/index.ts
kasperpeulen Apr 16, 2024
789991f
Update code/frameworks/nextjs/src/export-mocks/navigation/index.ts
kasperpeulen Apr 16, 2024
17c5152
Update code/frameworks/nextjs/src/export-mocks/navigation/index.ts
kasperpeulen Apr 16, 2024
fc7e664
Hide some junk of next for now
kasperpeulen Apr 16, 2024
5fafb46
Show redirect and next/cache spies
kasperpeulen Apr 16, 2024
a9ce1d4
Apply suggestions from code review
kylegach Apr 30, 2024
01c6509
Address feedback
kylegach Apr 30, 2024
39689ac
Merge branch 'kasper/module-mocking' into module-mocking-docs
kylegach Apr 30, 2024
1dca308
Snippetize examples
kylegach May 1, 2024
6bf05a1
Remove unnecessary snippets
kylegach May 1, 2024
c715248
Prettify snippets
kylegach May 1, 2024
7be08e3
Address feedback
kylegach May 1, 2024
a9d9bfa
Update decorator snippets
kylegach May 3, 2024
d2f7fe8
Address feedback
kylegach May 3, 2024
dfa82ab
Address feedback
kylegach May 6, 2024
2a0d245
Merge branch 'next' into module-mocking-docs
kylegach May 6, 2024
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
47 changes: 47 additions & 0 deletions docs/api/parameters.md
Expand Up @@ -141,6 +141,53 @@ When specifying a custom sorting function, the function behaves like a typical J

See [the guide](../writing-stories/naming-components-and-hierarchy/#sorting-stories) for usage examples.

### `test`

Type:

```ts
{
clearMocks?: boolean;
mockReset?: boolean;
restoreMocks?: boolean;
dangerouslyIgnoreUnhandledErrors?: boolean;
}
```

#### `clearMocks`

Type: `boolean`

Default: `false`

[Similar to Vitest](https://vitest.dev/config/#clearmocks), it will call `.mockClear()` on all spies created with `fn()` from `@storybook/test` when a story unmounts. This will clear mock history, but not reset its implementation to the default one.

#### `mockReset`

Type: `boolean`

Default: `false`

[Similar to Vitest](https://vitest.dev/config/#mockreset), it will call `.mockReset()` on all spies created with `fn()` from `@storybook/test` when a story unmounts. This will clear mock history and reset its implementation to an empty function (will return `undefined`).

#### `restoreMocks`

Type: `boolean`

Default: `true`

[Similar to Vitest](https://vitest.dev/config/#restoremocks), it will call `.restoreMocks()` on all spies created with `fn()` from `@storybook/test` when a story unmounts. This will clear mock history and reset its implementation to the original one.

#### `dangerouslyIgnoreUnhandledErrors`

Type: `boolean`

Default: `false`

Setting this to `true` will prevent the [play function](../writing-stories/play-function.md) from failing and showing a warning when unhandled errors are thrown during rendering or playing.

Unhandled errors might cause false positive assertions, they can be ignored by setting this parameter to `true`.

---

### Essential addons
Expand Down
23 changes: 22 additions & 1 deletion docs/configure/story-rendering.md
Expand Up @@ -2,7 +2,28 @@
title: 'Story rendering'
---

In Storybook, your stories render in a particular “preview” iframe (Canvas tab) inside the larger Storybook web application. The JavaScript build configuration of the preview is controlled by a [webpack](../builders/webpack.md) config, but you also may want to directly control the rendered HTML to help your stories render correctly.
In Storybook, your stories render in a particular “preview” iframe (also called the Canvas) inside the larger Storybook web application. The JavaScript build configuration of the preview is controlled by a [builder](../builders/index.md) config, but you also may want to run some code for every story or directly control the rendered HTML to help your stories render correctly.

## Running code for every story

Code executed in the preview file (`.storybook/preview.js|ts`) runs for every story in your Storybook. This is useful for setting up global styles, initializing libraries, or anything else required to render your components.

For example, with Vue, you can extend Storybook's application and register your library (e.g., [Fontawesome](https://github.com/FortAwesome/vue-fontawesome)). Or with Angular, add the package ([localize](https://angular.io/api/localize)) into your `polyfills.ts` and import it:

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

<CodeSnippets
paths={[
'vue/storybook-preview-with-library-decorator.library-3.js.mdx',
'vue/storybook-preview-with-library-decorator.library-3.ts.mdx',
'vue/storybook-preview-with-hoc-component-decorator.component-3.js.mdx',
'vue/storybook-preview-with-hoc-component-decorator.component-3.ts.mdx',
'angular/add-localize-package-to-polyfills.ts.mdx',
'angular/storybook-preview-with-angular-polyfills.js.mdx',
]}
/>
kylegach marked this conversation as resolved.
Show resolved Hide resolved

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

## Adding to &#60;head&#62;

Expand Down