Jest React Native

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.

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.

Package Information

• Package Name: jest-react-native
• Package Type: npm
• Language: JavaScript
• Installation: npm install --save-dev jest-react-native

Core Imports

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

// This will fail in modern React Native versions:
const mockComponent = require('jest-react-native');
// Error: Cannot resolve module 'react-native/jest/mockComponent'

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

Basic Usage

Using as Jest Preset

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

{
  "jest": {
    "preset": "jest-react-native"
  }
}

Or in a separate Jest configuration file:

module.exports = {
  preset: 'jest-react-native',
};

Component Mocking (Deprecated)

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

// Modern alternative for mocking React Native components:
jest.mock('react-native-custom-component', () => {
  return function MockCustomComponent(props) {
    return React.createElement('View', props);
  };
});

Capabilities

Jest Preset Configuration

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

The preset automatically configures:

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

Mock Component Function (Deprecated)

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

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.

/**
 * DEPRECATED: Creates a mock component for React Native native components
 * This function is no longer available and will cause import errors
 * @param {string} componentPath - Path or name of the component to mock  
 * @returns {Function} Mock React component function
 */
function mockComponent(componentPath)

Historical Usage (No longer works):

The function was historically used like this:

// ❌ This will fail in modern React Native:
const mockComponent = require('jest-react-native');

jest.mock('react-native-video', () => {
  return mockComponent('react-native-video');
});

Modern Alternatives:

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

// ✅ Modern manual mock approach:
jest.mock('react-native-video', () => {
  return function MockVideo(props) {
    return React.createElement('Video', props);
  };
});

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

Configuration Details

Haste Configuration

interface HasteConfig {
  defaultPlatform: "ios";
  platforms: ["android", "ios", "native"];
  providesModuleNodeModules: ["react-native"];
}

Module Name Mapping

interface ModuleNameMapper {
  "^[./a-zA-Z0-9$_-]+\\.(bmp|gif|jpg|jpeg|png|psd|svg|webp)$": "RelativeImageStub";
  "^React$": "<rootDir>/node_modules/react";
}

Transform Ignore Patterns

type TransformIgnorePatterns = [
  "node_modules/(?!(jest-)?react-native|react-clone-referenced-element)"
];

Setup Files

type SetupFiles = ["<rootDir>/node_modules/react-native/jest/setup.js"];

Module Path Ignore Patterns

type ModulePathIgnorePatterns = [
  "<rootDir>/node_modules/react-native/Libraries/react-native/",
  "<rootDir>/node_modules/react-native/packager/"
];

Package Configuration

Peer Dependencies

interface PeerDependencies {
  "react-native": ">=0.38.0";
}

Entry Points

• Main: build/index.js (built version of the mockComponent export)
• Source: src/index.js (source implementation)

Advanced Usage Patterns

Customizing the Preset

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

module.exports = {
  preset: 'jest-react-native',
  transformIgnorePatterns: [
    'node_modules/(?!react-native|my-project|react-native-button)',
  ],
  setupFilesAfterEnv: ['<rootDir>/jest-setup.js'],
  moduleNameMapper: {
    '\\.(css|less|scss)$': 'identity-obj-proxy',
  },
};

Modern Component Mocking

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

// Manual mock with property preservation
jest.mock('react-native-complex-component', () => {
  const React = require('react');
  const RealComponent = jest.requireActual('react-native-complex-component');
  
  function MockComponent(props) {
    return React.createElement('MockComplexComponent', props, props.children);
  }
  
  MockComponent.propTypes = RealComponent.propTypes;
  MockComponent.defaultProps = RealComponent.defaultProps;
  
  return MockComponent;
});

// Simple functional mock
jest.mock('react-native-simple-component', () => {
  return function MockSimpleComponent(props) {
    return React.createElement('MockSimpleComponent', props);
  };
});

Testing with Different Platforms

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.

Modern Testing Alternatives

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

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

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