0
# Jest Presets
1

2
Jest Expo provides multiple preset configurations to support testing across different platforms and scenarios. Each preset extends React Native's base Jest preset with Expo-specific configurations, module mappings, and platform-specific settings.
3

4
## Capabilities
5

6
### Base Preset
7

8
The main Jest preset that extends React Native's Jest preset with Expo-specific configurations.
9

10
```javascript { .api }
11
// In package.json or jest.config.js
12
{
13
  "jest": {
14
    "preset": "jest-expo"
15
  }
16
}
17
```
18

19
**Features:**
20
- Extends `react-native/jest-preset`
21
- Maps `react-native-vector-icons` to `@expo/vector-icons`
22
- Configures Babel transformation with Metro bundler settings
23
- Handles asset files (images, fonts, videos, documents)
24
- Sets up Expo module mocks and React Native environment
25
- Includes TypeScript support
26

27
**Usage Example:**
28

29
```javascript
30
// jest.config.js
31
module.exports = {
32
  preset: "jest-expo",
33
  // Additional configuration can be added here
34
};
35
```
36

37
### Universal Preset
38

39
Multi-platform testing configuration that runs tests across iOS, Android, web, and Node.js environments simultaneously.
40

41
```javascript { .api }
42
// In package.json or jest.config.js
43
{
44
  "jest": {
45
    "preset": "jest-expo/universal"
46
  }
47
}
48
```
49

50
**Features:**
51
- Combines iOS, Android, web, and Node.js test environments
52
- Includes watch plugins for platform selection during development
53
- Enables platform-specific snapshot generation
54
- Supports cross-platform test execution
55

56
**Usage Example:**
57

58
```javascript
59
// Running tests with universal preset
60
npm test
61
// Tests will run on all platforms: iOS, Android, web, Node.js
62
```
63

64
### Platform-Specific Presets
65

66
Individual presets for testing on specific platforms with optimized configurations.
67

68
#### iOS Preset
69

70
```javascript { .api }
71
// In package.json or jest.config.js
72
{
73
  "jest": {
74
    "preset": "jest-expo/ios"
75
  }
76
}
77
```
78

79
**Features:**
80
- iOS-specific test environment
81
- iOS snapshot resolver (`.ios.snap` files)
82
- React Native iOS module mocks
83
- Platform-specific display options
84

85
#### Android Preset
86

87
```javascript { .api }
88
// In package.json or jest.config.js
89
{
90
  "jest": {
91
    "preset": "jest-expo/android"
92
  }
93
}
94
```
95

96
**Features:**
97
- Android-specific test environment
98
- Android snapshot resolver (`.android.snap` files)
99
- React Native Android module mocks
100
- Platform-specific display options
101

102
#### Web Preset
103

104
```javascript { .api }
105
// In package.json or jest.config.js
106
{
107
  "jest": {
108
    "preset": "jest-expo/web"
109
  }
110
}
111
```
112

113
**Features:**
114
- Web-specific test environment using jsdom
115
- Web snapshot resolver (`.web.snap` files)
116
- Browser-compatible module mocks
117
- ShadowRoot global workaround for web components
118

119
#### Node.js Preset
120

121
```javascript { .api }
122
// In package.json or jest.config.js
123
{
124
  "jest": {
125
    "preset": "jest-expo/node"
126
  }
127
}
128
```
129

130
**Features:**
131
- Node.js test environment for server-side rendering
132
- Node.js snapshot resolver (`.node.snap` files)
133
- Server-side module mocks
134
- SSR-compatible configurations
135

136
### Preset Configuration Options
137

138
Platform presets can be customized using configuration functions:
139

140
```javascript { .api }
141
/**
142
 * Generate platform-specific Jest configuration
143
 * @param displayOptions - Display options for the preset
144
 * @param extensions - File extensions to handle
145
 * @param platform - Target platform name
146
 * @param options - Additional preset options
147
 * @returns Complete Jest configuration object
148
 */
149
function getPlatformPreset(
150
  displayOptions?: DisplayOptions,
151
  extensions?: string[],
152
  platform?: string,
153
  options?: PresetOptions
154
): JestConfig;
155

156
interface DisplayOptions {
157
  name?: string;
158
  color?: string;
159
}
160

161
interface PresetOptions {
162
  setupFilesAfterEnv?: string[];
163
  testEnvironment?: string;
164
  snapshotResolver?: string;
165
}
166
```
167

168
**Usage Example:**
169

170
```javascript
171
// jest.config.js
172
const { getWebPreset } = require("jest-expo/config");
173

174
module.exports = getWebPreset({
175
  name: "Custom Web Tests",
176
  color: "blue"
177
});
178
```
179

180
### Asset Handling
181

182
All presets include comprehensive asset file handling for Expo and Metro asset types:
183

184
```javascript { .api }
185
// Supported asset extensions
186
const supportedAssets = [
187
  // Images: bmp, gif, jpg, jpeg, png, psd, svg, webp, xml, heic, avif
188
  // Videos: m4v, mov, mp4, mpeg, mpg, webm
189
  // Audio: aac, aiff, caf, m4a, mp3, wav
190
  // Documents: html, pdf, yaml, yml
191
  // Fonts: otf, ttf
192
  // Archives: zip
193
  // Databases: db
194
];
195
```
196

197
### Module Name Mapping
198

199
All presets include Expo-specific module name mappings:
200

201
```javascript { .api }
202
// Automatic module mappings
203
const moduleNameMapper = {
204
  "^react-native-vector-icons$": "@expo/vector-icons",
205
  "^react-native-vector-icons/(.*)": "@expo/vector-icons/$1",
206
};
207
```
208

209
### Transform Ignore Patterns
210

211
Optimized transform ignore patterns for Expo and React Native ecosystem:
212

213
```javascript { .api }
214
const transformIgnorePatterns = [
215
  "/node_modules/(?!((jest-)?react-native|@react-native(-community)?)|expo(nent)?|@expo(nent)?/.*|@expo-google-fonts/.*|react-navigation|@react-navigation/.*|@sentry/react-native|native-base|react-native-svg)",
216
  "/node_modules/react-native-reanimated/plugin/"
217
];
218
```