0
# Test Methods
1
2
Various testing strategies for different use cases including standard snapshots, shallow rendering, multi-file snapshots, and render-only smoke testing. Each test method provides different rendering and assertion approaches.
3
4
## Capabilities
5
6
### Standard Snapshot
7
8
Default snapshot test method that renders stories and creates Jest snapshots.
9
10
```javascript { .api }
11
/** Standard snapshot test method */
12
declare const snapshot: StoryshotsTestMethod;
13
```
14
15
**Usage Example:**
16
17
```javascript
18
import initStoryshots, { snapshot } from "@storybook/addon-storyshots";
19
20
initStoryshots({
21
test: snapshot
22
});
23
```
24
25
### Snapshot with Options
26
27
Creates snapshot tests with custom rendering options or dynamic configuration.
28
29
```javascript { .api }
30
/**
31
* Creates snapshot test with custom options
32
* @param options - Rendering options or function returning options
33
* @returns Configured snapshot test method
34
*/
35
function snapshotWithOptions(options?: SnapshotsWithOptionsArgType): SnapshotsWithOptionsReturnType;
36
37
type SnapshotsWithOptionsArgType = Pick<StoryshotsOptions, "renderer" | "serializer"> | Function;
38
39
type SnapshotsWithOptionsReturnType = (
40
options: Pick<TestMethodOptions, "story" | "context" | "renderTree" | "snapshotFileName">
41
) => any;
42
```
43
44
**Usage Examples:**
45
46
```javascript
47
import initStoryshots, { snapshotWithOptions } from "@storybook/addon-storyshots";
48
49
// Static options
50
initStoryshots({
51
test: snapshotWithOptions({
52
renderer: mount,
53
createNodeMock: (element) => {
54
if (element.type === "textarea") {
55
return document.createElement("textarea");
56
}
57
}
58
})
59
});
60
61
// Dynamic options based on story
62
initStoryshots({
63
test: snapshotWithOptions((story) => ({
64
createNodeMock: (element) => {
65
if (story.name === "with-ref") {
66
return document.createElement(element.type);
67
}
68
return null;
69
}
70
}))
71
});
72
```
73
74
### Multi-Snapshot with Options
75
76
Creates separate snapshot files for each story rather than one monolithic file.
77
78
```javascript { .api }
79
/**
80
* Creates separate snapshot file for each story
81
* @param options - Rendering options or function returning options
82
* @returns Multi-file snapshot test method
83
*/
84
function multiSnapshotWithOptions(options?: SnapshotsWithOptionsArgType): StoryshotsTestMethod;
85
```
86
87
**Usage Examples:**
88
89
```javascript
90
import initStoryshots, { multiSnapshotWithOptions } from "@storybook/addon-storyshots";
91
92
// Basic multi-file snapshots
93
initStoryshots({
94
test: multiSnapshotWithOptions(),
95
integrityOptions: { cwd: __dirname }
96
});
97
98
// With custom options
99
initStoryshots({
100
test: multiSnapshotWithOptions({
101
renderer: mount
102
})
103
});
104
```
105
106
**Jest Configuration for Multi-Snapshot:**
107
108
```javascript
109
// jest.config.js
110
module.exports = {
111
transform: {
112
"^.+\\.stories\\.jsx?$": "@storybook/addon-storyshots/injectFileName",
113
"^.+\\.jsx?$": "babel-jest",
114
},
115
};
116
```
117
118
### Shallow Snapshot
119
120
Shallow rendering snapshot test for React components using shallow rendering.
121
122
```javascript { .api }
123
/**
124
* Shallow rendering snapshot test
125
* @param args - Test method arguments
126
*/
127
declare const shallowSnapshot: StoryshotsTestMethod;
128
```
129
130
**Usage Example:**
131
132
```javascript
133
import initStoryshots, { shallowSnapshot } from "@storybook/addon-storyshots";
134
135
initStoryshots({
136
test: shallowSnapshot
137
});
138
```
139
140
### Render Only
141
142
Render stories without creating snapshots - useful for smoke testing to ensure components don't throw errors.
143
144
```javascript { .api }
145
/** Render-only test without snapshots (smoke testing) */
146
declare const renderOnly: StoryshotsTestMethod;
147
```
148
149
**Usage Example:**
150
151
```javascript
152
import initStoryshots, { renderOnly } from "@storybook/addon-storyshots";
153
154
// Smoke test - just ensure components render without errors
155
initStoryshots({
156
test: renderOnly
157
});
158
```
159
160
### Render with Options
161
162
Custom rendering with options but without snapshot assertions.
163
164
```javascript { .api }
165
/**
166
* Custom rendering with options
167
* @param options - Rendering options
168
* @returns Render-only test method
169
*/
170
function renderWithOptions(options?: any): StoryshotsTestMethod;
171
```
172
173
**Usage Examples:**
174
175
```javascript
176
import initStoryshots, { renderWithOptions } from "@storybook/addon-storyshots";
177
import { mount } from "enzyme";
178
179
// Custom renderer for smoke testing
180
initStoryshots({
181
test: renderWithOptions({
182
renderer: mount
183
})
184
});
185
186
// With React Testing Library
187
import { render } from "@testing-library/react";
188
189
initStoryshots({
190
test: renderWithOptions({
191
renderer: render
192
})
193
});
194
```
195
196
### Test Method Interface
197
198
Common interface for all test methods with optional lifecycle hooks.
199
200
```javascript { .api }
201
interface StoryshotsTestMethod {
202
/** Main test function */
203
(args: TestMethodOptions): any;
204
205
/** Run before all tests in the suite */
206
beforeAll?: () => void | Promise<void>;
207
208
/** Run before each individual test */
209
beforeEach?: () => void | Promise<void>;
210
211
/** Run after all tests in the suite */
212
afterAll?: () => void | Promise<void>;
213
214
/** Run after each individual test */
215
afterEach?: () => void | Promise<void>;
216
}
217
218
interface TestMethodOptions {
219
/** Story object with render method */
220
story: any;
221
222
/** Story context with metadata */
223
context: any;
224
225
/** Tree renderer function */
226
renderTree: RenderTree;
227
228
/** Shallow renderer function */
229
renderShallowTree: RenderTree;
230
231
/** File converter instance */
232
stories2snapsConverter: Stories2SnapsConverter;
233
234
/** Optional snapshot filename for multi-snapshot */
235
snapshotFileName?: string;
236
237
/** Additional options */
238
options: any;
239
240
/** Async completion callback (when asyncJest: true) */
241
done?: () => void;
242
}
243
244
type RenderTree = (story: any, context: any, options?: any) => any;
245
```
246
247
### Custom Test Methods
248
249
Create custom test methods with lifecycle hooks.
250
251
**Custom Test Example:**
252
253
```javascript
254
import initStoryshots from "@storybook/addon-storyshots";
255
import { mount } from "enzyme";
256
import toJson from "enzyme-to-json";
257
258
const customTest = ({ story, context }) => {
259
const storyElement = story.render();
260
const tree = mount(storyElement);
261
262
// Custom assertions
263
expect(tree.find("[data-testid]")).toHaveLength.greaterThan(0);
264
expect(toJson(tree)).toMatchSnapshot();
265
266
// Cleanup
267
tree.unmount();
268
};
269
270
// Add lifecycle hooks
271
customTest.beforeEach = () => {
272
console.log("Starting test...");
273
};
274
275
customTest.afterEach = () => {
276
console.log("Test completed");
277
};
278
279
initStoryshots({
280
test: customTest
281
});
282
```
283
284
### Async Testing
285
286
Handle asynchronous component rendering with done callback.
287
288
```javascript { .api }
289
// Enable async testing
290
asyncJest?: boolean;
291
```
292
293
**Async Test Example:**
294
295
```javascript
296
import initStoryshots from "@storybook/addon-storyshots";
297
298
initStoryshots({
299
asyncJest: true,
300
test: ({ story, context, done }) => {
301
const storyElement = story.render();
302
const tree = mount(storyElement);
303
304
// Wait for async operations
305
setTimeout(() => {
306
expect(toJson(tree.update())).toMatchSnapshot();
307
done(); // Required when asyncJest: true
308
}, 100);
309
}
310
});
311
```