0
# Core Testing
1

2
Main snapshot testing functionality that automatically converts Storybook stories into Jest snapshot tests. This provides the primary interface for configuring and running snapshot tests across all stories in a Storybook project.
3

4
## Capabilities
5

6
### Initialize Storyshots
7

8
Sets up snapshot testing for all Storybook stories with configurable options.
9

10
```javascript { .api }
11
/**
12
 * Initialize snapshot testing for Storybook stories
13
 * @param options - Configuration options for snapshot testing
14
 */
15
function initStoryshots(options?: StoryshotsOptions): void;
16
```
17

18
**Usage Examples:**
19

20
```javascript
21
import initStoryshots from "@storybook/addon-storyshots";
22

23
// Basic initialization - tests all stories
24
initStoryshots();
25

26
// With custom suite name
27
initStoryshots({
28
  suite: "Visual Regression Tests"
29
});
30

31
// Filter specific story kinds
32
initStoryshots({
33
  storyKindRegex: /^Button|Input$/
34
});
35

36
// Custom config path
37
initStoryshots({
38
  configPath: path.join(__dirname, "custom-storybook-config")
39
});
40
```
41

42
### Configuration Options
43

44
Complete configuration interface for customizing snapshot test behavior.
45

46
```javascript { .api }
47
interface StoryshotsOptions {
48
  /** Enable async Jest testing with done callback */
49
  asyncJest?: boolean;
50
  
51
  /** Custom configuration function (like preview.js) */
52
  config?: (options: any) => void;
53
  
54
  /** Options for integrity testing of snapshot-story file consistency */
55
  integrityOptions?: GlobOptionsWithFileTypesFalse | false;
56
  
57
  /** Path to Storybook config directory or preview.js file */
58
  configPath?: string;
59
  
60
  /** Custom test suite name (default: "Storyshots") */
61
  suite?: string;
62
  
63
  /** Filter stories by kind/component name */
64
  storyKindRegex?: RegExp | string;
65
  
66
  /** Filter stories by story name */
67
  storyNameRegex?: RegExp | string;
68
  
69
  /** Target framework for auto-detection override */
70
  framework?: SupportedFramework;
71
  
72
  /** Custom test method */
73
  test?: StoryshotsTestMethod;
74
  
75
  /** Custom renderer function (e.g., enzyme mount) */
76
  renderer?: Function;
77
  
78
  /** Jest snapshot serializers */
79
  snapshotSerializers?: jest.SnapshotSerializerPlugin[];
80
  
81
  /** @deprecated Use snapshotSerializers instead */
82
  serializer?: any;
83
  
84
  /** Custom file converter instance */
85
  stories2snapsConverter?: Stories2SnapsConverter;
86
}
87
```
88

89
**Configuration Examples:**
90

91
```javascript
92
// Async testing for components with async rendering
93
initStoryshots({
94
  asyncJest: true,
95
  test: ({ story, context, done }) => {
96
    const storyElement = story.render();
97
    const tree = mount(storyElement);
98
    
99
    setTimeout(() => {
100
      expect(toJson(tree.update())).toMatchSnapshot();
101
      done();
102
    }, 100);
103
  }
104
});
105

106
// Custom renderer with Enzyme
107
import { mount } from "enzyme";
108

109
initStoryshots({
110
  renderer: mount,
111
  snapshotSerializers: [require("enzyme-to-json/serializer")]
112
});
113

114
// Framework-specific setup
115
initStoryshots({
116
  framework: "react",
117
  configPath: path.join(__dirname, ".storybook"),
118
  integrityOptions: { cwd: __dirname }
119
});
120
```
121

122
### Story Filtering
123

124
Filter which stories are included in snapshot testing.
125

126
```javascript { .api }
127
// RegExp or string patterns for filtering
128
storyKindRegex?: RegExp | string;
129
storyNameRegex?: RegExp | string;
130
```
131

132
**Filtering Examples:**
133

134
```javascript
135
// Test only Button components
136
initStoryshots({
137
  storyKindRegex: /^Button$/
138
});
139

140
// Test everything except components with "DontTest" in name
141
initStoryshots({
142
  storyKindRegex: /^((?!.*?DontTest).)*$/
143
});
144

145
// Test stories with "primary" in the name
146
initStoryshots({
147
  storyNameRegex: /primary/i
148
});
149

150
// Combine multiple filters
151
initStoryshots({
152
  storyKindRegex: /^(Button|Input)$/,
153
  storyNameRegex: /^(?!.*deprecated)/i
154
});
155
```
156

157
### Framework Support
158

159
Automatic framework detection with manual override capability.
160

161
```javascript { .api }
162
type SupportedFramework = 
163
  | "angular" 
164
  | "html" 
165
  | "preact" 
166
  | "react" 
167
  | "react-native" 
168
  | "svelte" 
169
  | "vue" 
170
  | "vue3" 
171
  | "web-components";
172
```
173

174
**Framework Examples:**
175

176
```javascript
177
// Let StoryShots auto-detect framework
178
initStoryshots();
179

180
// Force specific framework
181
initStoryshots({
182
  framework: "react"
183
});
184

185
// Framework running outside app directory
186
initStoryshots({
187
  framework: "vue3",
188
  configPath: path.join(__dirname, ".storybook")
189
});
190
```
191

192
### Integrity Testing
193

194
Verify that snapshot files match story files to prevent orphaned snapshots.
195

196
```javascript { .api }
197
integrityOptions?: GlobOptionsWithFileTypesFalse | false;
198
```
199

200
**Integrity Examples:**
201

202
```javascript
203
// Enable integrity testing
204
initStoryshots({
205
  integrityOptions: { 
206
    cwd: __dirname,
207
    ignore: ["**/deprecated/**"] 
208
  },
209
  test: multiSnapshotWithOptions()
210
});
211

212
// Disable integrity testing
213
initStoryshots({
214
  integrityOptions: false
215
});
216
```