tessl/npm-jest-expo

A Jest preset to painlessly test your Expo / React Native apps.

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Securityby

Pending

The risk profile of this skill

Overview

Eval results

Files

Jest Presets

Name: tessl/npm-jest-expo
Author: tessl

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.

Capabilities

Base Preset

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

// In package.json or jest.config.js
{
  "jest": {
    "preset": "jest-expo"
  }
}

Features:

Extends react-native/jest-preset
Maps react-native-vector-icons to @expo/vector-icons
Configures Babel transformation with Metro bundler settings
Handles asset files (images, fonts, videos, documents)
Sets up Expo module mocks and React Native environment
Includes TypeScript support

Usage Example:

// jest.config.js
module.exports = {
  preset: "jest-expo",
  // Additional configuration can be added here
};

Universal Preset

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

// In package.json or jest.config.js
{
  "jest": {
    "preset": "jest-expo/universal"
  }
}

Features:

Combines iOS, Android, web, and Node.js test environments
Includes watch plugins for platform selection during development
Enables platform-specific snapshot generation
Supports cross-platform test execution

Usage Example:

// Running tests with universal preset
npm test
// Tests will run on all platforms: iOS, Android, web, Node.js

Platform-Specific Presets

Individual presets for testing on specific platforms with optimized configurations.

iOS Preset

// In package.json or jest.config.js
{
  "jest": {
    "preset": "jest-expo/ios"
  }
}

Features:

iOS-specific test environment
iOS snapshot resolver (.ios.snap files)
React Native iOS module mocks
Platform-specific display options

Android Preset

// In package.json or jest.config.js
{
  "jest": {
    "preset": "jest-expo/android"
  }
}

Features:

Android-specific test environment
Android snapshot resolver (.android.snap files)
React Native Android module mocks
Platform-specific display options

Web Preset

// In package.json or jest.config.js
{
  "jest": {
    "preset": "jest-expo/web"
  }
}

Features:

Web-specific test environment using jsdom
Web snapshot resolver (.web.snap files)
Browser-compatible module mocks
ShadowRoot global workaround for web components

Node.js Preset

// In package.json or jest.config.js
{
  "jest": {
    "preset": "jest-expo/node"
  }
}

Features:

Node.js test environment for server-side rendering
Node.js snapshot resolver (.node.snap files)
Server-side module mocks
SSR-compatible configurations

Preset Configuration Options

Platform presets can be customized using configuration functions:

/**
 * Generate platform-specific Jest configuration
 * @param displayOptions - Display options for the preset
 * @param extensions - File extensions to handle
 * @param platform - Target platform name
 * @param options - Additional preset options
 * @returns Complete Jest configuration object
 */
function getPlatformPreset(
  displayOptions?: DisplayOptions,
  extensions?: string[],
  platform?: string,
  options?: PresetOptions
): JestConfig;

interface DisplayOptions {
  name?: string;
  color?: string;
}

interface PresetOptions {
  setupFilesAfterEnv?: string[];
  testEnvironment?: string;
  snapshotResolver?: string;
}

Usage Example:

// jest.config.js
const { getWebPreset } = require("jest-expo/config");

module.exports = getWebPreset({
  name: "Custom Web Tests",
  color: "blue"
});

Asset Handling

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

// Supported asset extensions
const supportedAssets = [
  // Images: bmp, gif, jpg, jpeg, png, psd, svg, webp, xml, heic, avif
  // Videos: m4v, mov, mp4, mpeg, mpg, webm
  // Audio: aac, aiff, caf, m4a, mp3, wav
  // Documents: html, pdf, yaml, yml
  // Fonts: otf, ttf
  // Archives: zip
  // Databases: db
];

Module Name Mapping

All presets include Expo-specific module name mappings:

// Automatic module mappings
const moduleNameMapper = {
  "^react-native-vector-icons$": "@expo/vector-icons",
  "^react-native-vector-icons/(.*)": "@expo/vector-icons/$1",
};

Transform Ignore Patterns

Optimized transform ignore patterns for Expo and React Native ecosystem:

const transformIgnorePatterns = [
  "/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)",
  "/node_modules/react-native-reanimated/plugin/"
];