Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/gebeto/storybook-addon-manual-mocks
Manual Mocks addon for Storybook
https://github.com/gebeto/storybook-addon-manual-mocks
storybook storybook-addon
Last synced: 3 months ago
JSON representation
Manual Mocks addon for Storybook
- Host: GitHub
- URL: https://github.com/gebeto/storybook-addon-manual-mocks
- Owner: gebeto
- License: mit
- Created: 2022-09-24T13:47:05.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-02-16T12:56:36.000Z (12 months ago)
- Last Synced: 2024-10-14T00:37:08.204Z (4 months ago)
- Topics: storybook, storybook-addon
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/storybook-addon-manual-mocks
- Size: 1.57 MB
- Stars: 6
- Watchers: 1
- Forks: 0
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# Storybook Addon Manual Mocks
The Storybook Manual Mocks addon can be used to Mocking your imports as [Manual Mocks in Jest](https://jestjs.io/docs/manual-mocks)
## Getting Started
Install this addon by adding the `storybook-addon-manual-mocks` dependency:
```sh
yarn add -D storybook-addon-manual-mocks
# or
npm install --save-dev storybook-addon-manual-mocks
```
within `.storybook/main.js`:
### Universal config for vite and webpack
```js
module.exports = {
addons: [
{
name: "storybook-addon-manual-mocks",
options: {
mocksFolder: "__mocks__",
}
}
],
};
```
### Specific `vite` config
```js
module.exports = {
addons: [
{
name: "storybook-addon-manual-mocks/vite",
options: {
mocksFolder: "__mocks__",
}
}
],
};
```
### Specific `webpack` config
```js
module.exports = {
addons: [
{
name: "storybook-addon-manual-mocks/webpack",
options: {
mocksFolder: "__mocks__",
}
}
],
};
```
## Available `options`
| Name | Type | Default | Description |
|---------------|----------|---------------|-------------|
| `mocksFolder` | `string` | `"__mocks__"` | Custom mocks folder |
## How to use
You can extract you server querying from components to hooks and mock those files
```
MyComponent
├── __mocks__
│ └── MyComponent.hooks.js
├── MyComponent.component.js
├── MyComponent.stories.js
├── MyComponent.hooks.js
└── index.js
```
When you will import `MyComponent.hooks` in `MyComponent.component.js`, file from `__mocks__` directory will be used instead
```js
import { useSomeData } from 'MyComponent.hooks';
// it will import mock under the hood '__mocks__/MyComponent.hooks';
```
## Important
This addon works only with relative imports(`./` or `../`) for example
```js
// ✅ this CAN be mocked
import { useSomeData } from './MyComponent.hooks';
// ✅ this CAN be mocked
import { useSomeData } from '../MyComppnent/MyComponent.hooks';
// ⛔️ this CAN'T be mocked
import { useSomeData } from '@monorepo/components/MyComponent/MyComponent.hooks';
// ✅ this CAN be mocked
// Because inside the package, MyComponent.hooks was imported relatively
// `./MyComponent.hooks` by `MyComponent/index.js`, so it will be mocked correctly
import { useSomeData } from '@monorepo/components';
```