0
# Jest React Native
1

2
Jest React Native is a Jest preset package specifically designed for React Native applications. It provides a comprehensive testing configuration that handles React Native's unique module system and platform-specific requirements.
3

4
**Important Note:** This package was designed for older versions of React Native and Jest (circa 2016-2017). The mockComponent functionality it attempts to export is deprecated and no longer available in modern React Native versions. The Jest preset configuration remains functional.
5

6
## Package Information
7

8
- **Package Name**: jest-react-native
9
- **Package Type**: npm
10
- **Language**: JavaScript
11
- **Installation**: `npm install --save-dev jest-react-native`
12

13
## Core Imports
14

15
**Note:** The mockComponent import is deprecated and will not work with modern React Native versions.
16

17
```javascript
18
// This will fail in modern React Native versions:
19
const mockComponent = require('jest-react-native');
20
// Error: Cannot resolve module 'react-native/jest/mockComponent'
21
```
22

23
The package is primarily used as a Jest preset, not as a direct import.
24

25
## Basic Usage
26

27
### Using as Jest Preset
28

29
The primary usage is as a Jest preset in your `package.json`:
30

31
```json
32
{
33
  "jest": {
34
    "preset": "jest-react-native"
35
  }
36
}
37
```
38

39
Or in a separate Jest configuration file:
40

41
```javascript
42
module.exports = {
43
  preset: 'jest-react-native',
44
};
45
```
46

47
### Component Mocking (Deprecated)
48

49
**⚠️ Deprecated:** The mockComponent function is no longer available. For modern React Native component mocking, use alternatives like `@testing-library/react-native` or manual mocks.
50

51
```javascript
52
// Modern alternative for mocking React Native components:
53
jest.mock('react-native-custom-component', () => {
54
  return function MockCustomComponent(props) {
55
    return React.createElement('View', props);
56
  };
57
});
58
```
59

60
## Capabilities
61

62
### Jest Preset Configuration
63

64
Complete Jest configuration optimized for React Native projects, including Haste module system configuration, module name mapping, transform patterns, and setup files.
65

66
The preset automatically configures:
67

68
- **Node environment** instead of jsdom for better performance
69
- **Haste module system** with iOS as default platform and support for Android, iOS, and native platforms
70
- **Module name mapping** for image assets and React imports
71
- **Transform ignore patterns** to properly handle React Native modules
72
- **Setup files** for React Native's Jest configuration
73
- **Module path ignore patterns** for React Native internal paths
74

75
### Mock Component Function (Deprecated)
76

77
**⚠️ This function is deprecated and no longer available in modern React Native versions.**
78

79
The package attempts to export a `mockComponent` function from `react-native/jest/mockComponent`, but this module path no longer exists in current React Native installations.
80

81
```javascript { .api }
82
/**
83
 * DEPRECATED: Creates a mock component for React Native native components
84
 * This function is no longer available and will cause import errors
85
 * @param {string} componentPath - Path or name of the component to mock  
86
 * @returns {Function} Mock React component function
87
 */
88
function mockComponent(componentPath)
89
```
90

91
**Historical Usage (No longer works):**
92

93
The function was historically used like this:
94
```javascript
95
// ❌ This will fail in modern React Native:
96
const mockComponent = require('jest-react-native');
97

98
jest.mock('react-native-video', () => {
99
  return mockComponent('react-native-video');
100
});
101
```
102

103
**Modern Alternatives:**
104

105
For component mocking in current React Native projects, use manual mocks or testing libraries:
106

107
```javascript
108
// ✅ Modern manual mock approach:
109
jest.mock('react-native-video', () => {
110
  return function MockVideo(props) {
111
    return React.createElement('Video', props);
112
  };
113
});
114

115
// ✅ Using @testing-library/react-native:
116
import { render } from '@testing-library/react-native';
117
// Use render() with proper mocking strategies
118
```
119

120
## Configuration Details
121

122
### Haste Configuration
123

124
```javascript { .api }
125
interface HasteConfig {
126
  defaultPlatform: "ios";
127
  platforms: ["android", "ios", "native"];
128
  providesModuleNodeModules: ["react-native"];
129
}
130
```
131

132
### Module Name Mapping
133

134
```javascript { .api }
135
interface ModuleNameMapper {
136
  "^[./a-zA-Z0-9$_-]+\\.(bmp|gif|jpg|jpeg|png|psd|svg|webp)$": "RelativeImageStub";
137
  "^React$": "<rootDir>/node_modules/react";
138
}
139
```
140

141
### Transform Ignore Patterns
142

143
```javascript { .api }
144
type TransformIgnorePatterns = [
145
  "node_modules/(?!(jest-)?react-native|react-clone-referenced-element)"
146
];
147
```
148

149
### Setup Files
150

151
```javascript { .api }
152
type SetupFiles = ["<rootDir>/node_modules/react-native/jest/setup.js"];
153
```
154

155
### Module Path Ignore Patterns
156

157
```javascript { .api }
158
type ModulePathIgnorePatterns = [
159
  "<rootDir>/node_modules/react-native/Libraries/react-native/",
160
  "<rootDir>/node_modules/react-native/packager/"
161
];
162
```
163

164
## Package Configuration
165

166
### Peer Dependencies
167

168
```javascript { .api }
169
interface PeerDependencies {
170
  "react-native": ">=0.38.0";
171
}
172
```
173

174
### Entry Points
175

176
- **Main**: `build/index.js` (built version of the mockComponent export)
177
- **Source**: `src/index.js` (source implementation)
178

179
## Advanced Usage Patterns
180

181
### Customizing the Preset
182

183
You can extend the jest-react-native preset with additional configuration:
184

185
```javascript
186
module.exports = {
187
  preset: 'jest-react-native',
188
  transformIgnorePatterns: [
189
    'node_modules/(?!react-native|my-project|react-native-button)',
190
  ],
191
  setupFilesAfterEnv: ['<rootDir>/jest-setup.js'],
192
  moduleNameMapper: {
193
    '\\.(css|less|scss)$': 'identity-obj-proxy',
194
  },
195
};
196
```
197

198
### Modern Component Mocking
199

200
For modern React Native testing, use these approaches instead of the deprecated mockComponent:
201

202
```javascript
203
// Manual mock with property preservation
204
jest.mock('react-native-complex-component', () => {
205
  const React = require('react');
206
  const RealComponent = jest.requireActual('react-native-complex-component');
207
  
208
  function MockComponent(props) {
209
    return React.createElement('MockComplexComponent', props, props.children);
210
  }
211
  
212
  MockComponent.propTypes = RealComponent.propTypes;
213
  MockComponent.defaultProps = RealComponent.defaultProps;
214
  
215
  return MockComponent;
216
});
217

218
// Simple functional mock
219
jest.mock('react-native-simple-component', () => {
220
  return function MockSimpleComponent(props) {
221
    return React.createElement('MockSimpleComponent', props);
222
  };
223
});
224
```
225

226
### Testing with Different Platforms
227

228
The preset supports platform-specific testing by configuring the `defaultPlatform` in the Haste configuration, allowing tests to run with platform-specific module resolution for iOS, Android, or native platforms.
229

230
### Modern Testing Alternatives
231

232
For current React Native projects, consider these modern testing solutions instead of jest-react-native:
233

234
- **@testing-library/react-native**: Modern testing utilities with better component interaction testing
235
- **react-test-renderer**: Official React testing renderer with React Native support
236
- **Metro Jest preset**: Built-in Jest configuration that comes with React Native CLI projects
237
- **Manual Jest configuration**: Custom Jest setup tailored to your specific React Native version
238

239
These alternatives provide better compatibility with current React Native versions and more robust testing capabilities.