storybook-addon-vis 0.18.2 → 0.18.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +6 -6
- package/readme.md +42 -4
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "storybook-addon-vis",
|
|
3
|
-
"version": "0.18.
|
|
3
|
+
"version": "0.18.3",
|
|
4
4
|
"description": "Storybook Vitest visual testing addon",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"image-snapshot",
|
|
@@ -58,7 +58,7 @@
|
|
|
58
58
|
],
|
|
59
59
|
"dependencies": {
|
|
60
60
|
"type-plus": "8.0.0-beta.7",
|
|
61
|
-
"vitest-plugin-vis": "2.1.
|
|
61
|
+
"vitest-plugin-vis": "2.1.1"
|
|
62
62
|
},
|
|
63
63
|
"devDependencies": {
|
|
64
64
|
"@storybook/addon-essentials": "^8.4.2",
|
|
@@ -72,9 +72,9 @@
|
|
|
72
72
|
"@types/react": "^18.2.65",
|
|
73
73
|
"@types/react-dom": "^18.2.21",
|
|
74
74
|
"@vitejs/plugin-react": "^4.2.1",
|
|
75
|
-
"@vitest/browser": "^3.0.
|
|
76
|
-
"@vitest/coverage-istanbul": "^3.0.
|
|
77
|
-
"@vitest/expect": "^3.0.
|
|
75
|
+
"@vitest/browser": "^3.0.6",
|
|
76
|
+
"@vitest/coverage-istanbul": "^3.0.6",
|
|
77
|
+
"@vitest/expect": "^3.0.6",
|
|
78
78
|
"boxen": "^8.0.1",
|
|
79
79
|
"cross-env": "^7.0.3",
|
|
80
80
|
"dedent": "^1.5.1",
|
|
@@ -86,7 +86,7 @@
|
|
|
86
86
|
"tsup": "^8.3.5",
|
|
87
87
|
"typescript": "^5.7.2",
|
|
88
88
|
"vite": "^6.0.9",
|
|
89
|
-
"vitest": "^3.0.
|
|
89
|
+
"vitest": "^3.0.6",
|
|
90
90
|
"vitest-browser-react": "^0.1.0",
|
|
91
91
|
"webdriverio": "latest",
|
|
92
92
|
"zx": "^8.0.0"
|
package/readme.md
CHANGED
|
@@ -60,12 +60,20 @@ export default defineConfig({
|
|
|
60
60
|
storybookVis(/* options */)
|
|
61
61
|
],
|
|
62
62
|
test: {
|
|
63
|
+
// vitest v2
|
|
63
64
|
browser: {
|
|
64
|
-
// typical browser config
|
|
65
65
|
enabled: true,
|
|
66
66
|
provider: 'playwright',
|
|
67
|
-
name: 'chromium'
|
|
67
|
+
name: 'chromium',
|
|
68
68
|
},
|
|
69
|
+
// vitest v3
|
|
70
|
+
browser: {
|
|
71
|
+
enabled: true,
|
|
72
|
+
provider: 'playwright',
|
|
73
|
+
instances: [
|
|
74
|
+
{ browser: 'chromium' }
|
|
75
|
+
]
|
|
76
|
+
}
|
|
69
77
|
// recommend to set to false
|
|
70
78
|
globals: false,
|
|
71
79
|
// Needed by both Storybook Test Addon and Storybook Visual Testing
|
|
@@ -151,7 +159,16 @@ import { defineConfig } from 'vitest/config'
|
|
|
151
159
|
export default defineConfig({
|
|
152
160
|
plugins: [
|
|
153
161
|
storybookVis({
|
|
154
|
-
snapshotRootDir: 'path/to/snapshot'
|
|
162
|
+
snapshotRootDir: 'path/to/snapshot',
|
|
163
|
+
// or if you need super power
|
|
164
|
+
snapshotRootDir: ({
|
|
165
|
+
ci, // true if running on CI
|
|
166
|
+
platform, // process.platform
|
|
167
|
+
providerName, // 'playwright' or 'webdriverio'
|
|
168
|
+
browserName,
|
|
169
|
+
screenshotFailures, // from `browser` config
|
|
170
|
+
screenshotDirectory, // from `browser` config
|
|
171
|
+
}) => string,
|
|
155
172
|
})
|
|
156
173
|
],
|
|
157
174
|
// ...
|
|
@@ -274,7 +291,11 @@ vis.presets.manual()
|
|
|
274
291
|
vis.presets.auto()
|
|
275
292
|
|
|
276
293
|
// capture image snapshot at the end of each test and story with `snapshot` tag
|
|
277
|
-
// for multiple themes (light and dark in this example)
|
|
294
|
+
// for multiple themes (light and dark in this example).
|
|
295
|
+
//
|
|
296
|
+
// Note that this changes the theme in the `afterEach` hook.
|
|
297
|
+
// If you want to capture manual snapshots in different themes,
|
|
298
|
+
// configure Vitest to run the tests in different themes.
|
|
278
299
|
vis.presets.theme({
|
|
279
300
|
async light() { document.body.classList.remove('dark') },
|
|
280
301
|
async dark() { document.body.classList.add('dark') },
|
|
@@ -522,6 +543,23 @@ or hoist the `pathe` package:
|
|
|
522
543
|
hoist-pattern[] = pathe
|
|
523
544
|
```
|
|
524
545
|
|
|
546
|
+
> It takes empty snapshots on regular tests
|
|
547
|
+
|
|
548
|
+
If you are using Storybook 8.5 and using the workaround to run both stories and tests [as described here](https://github.com/storybookjs/storybook/issues/30307),
|
|
549
|
+
Storybook are also transforming the tests as if they are stories.
|
|
550
|
+
That causes it to inject elements into the DOM and this addon detect that as some rendering by your tests,
|
|
551
|
+
thus taking an image snapshot.
|
|
552
|
+
|
|
553
|
+
Since it is a bug to be addressed soon,
|
|
554
|
+
please disable the snapshots for your tests by adding a `beforeAll` hook:
|
|
555
|
+
|
|
556
|
+
```ts
|
|
557
|
+
import { setAutoSnapshotOptions } from 'storybook-addon-vis'
|
|
558
|
+
import { beforeAll } from 'vitest'
|
|
559
|
+
|
|
560
|
+
beforeAll(() => setAutoSnapshotOptions(false))
|
|
561
|
+
```
|
|
562
|
+
|
|
525
563
|
[@storybook/experimental-addon-test]: https://www.npmjs.com/package/@storybook/experimental-addon-test
|
|
526
564
|
[downloads_image]: https://img.shields.io/npm/dm/storybook-addon-vis.svg?style=flat
|
|
527
565
|
[github_action_url]: https://github.com/repobuddy/storybook-addon-vis/actions
|