Unable to test components ought to StatusBarManager.getHeight is not a function site in Expo Project

[SalahAdDin]

We are building a Tile using the Card component.

We write the unit test as follows:

import React from 'react';
import { render } from '@testing-library/react-native';
import { fireEvent } from '@testing-library/react-native';
import { CardDriver } from 'react-native-ui-lib/testkit';
import PokemonTile from './PokemonTile';
import { TYPE_COLORS } from '../constants';

describe('PokemonTile', () => {
  const mockPokemon = {
    id: 1,
    name: 'bulbasaur',
    height: 7,
    types: [{ id: '12', name: 'grass' }, { id: '4', name: 'poison' }],
    sprites: { frontDefault: 'https://example.com/bulbasaur.png' },
  };

  const mockOnPress = jest.fn();

  it('renders correctly', () => {
    const { getByText } = render(
      <PokemonTile pokemon={mockPokemon} onPress={mockOnPress} />
    );

    expect(getByText('#001')).toBeTruthy();
    expect(getByText('Bulbasaur')).toBeTruthy();
    expect(getByText('7')).toBeTruthy();
    expect(getByText('GRASS')).toBeTruthy();
    expect(getByText('POISON')).toBeTruthy();
  });

  it('calls onPress when card is pressed', () => {
    const { getByText, getByTestId } = render(
      <PokemonTile pokemon={mockPokemon} onPress={mockOnPress} />
    );

    const card = CardDriver({ testID: 'pokemon-card', children: getByText('Bulbasaur') });
    card.press();

    expect(mockOnPress).toHaveBeenCalledWith(mockPokemon);
  });

  it('applies correct colors based on primary type', () => {
    const { getByText } = render(
      <PokemonTile pokemon={mockPokemon} onPress={mockOnPress} />
    );

    const nameText = getByText('Bulbasaur');
    expect(nameText.props.style.color).toBe(TYPE_COLORS['grass'].text);
  });
});

When running it we get:

FAIL  app/components/PokemonTile.test.tsx
  ● Test suite failed to run

    TypeError: StatusBarManager.getHeight is not a function

      1 | import React from "react";
      2 | import { StyleSheet } from "react-native";
    > 3 | import { Card, Chip, Text, View } from "react-native-ui-lib";
        | ^
      4 | import { TYPE_COLORS } from "../constants";
      5 | import { PokemonDetail } from "../domain/pokemon.model";
      6 |

      at getHeight (node_modules/react-native-ui-lib/src/commons/Constants.js:30:22)
      at Object.setStatusBarHeight (node_modules/react-native-ui-lib/src/commons/Constants.js:171:1)
      at Object.require (node_modules/react-native-ui-lib/src/style/scheme.js:8:1)
      at Object.require (node_modules/react-native-ui-lib/src/style/colors.js:21:1)
      at Object.require (node_modules/react-native-ui-lib/src/style/index.js:1:1)
      at Object.require (node_modules/react-native-ui-lib/src/index.js:1666:14)
      at Object.require (app/components/PokemonTile.tsx:3:1)
      at Object.require (app/components/PokemonTile.test.tsx:5:1)

To fix it we try mocking the StatusBarManager.getHeight:

import { NativeModules } from 'react-native';

NativeModules.StatusBarManager = {
  getHeight: jest.fn((callback) => callback({ height: 20 })),
};

import { render, fireEvent } from '@testing-library/react-native';
import PokemonTile from './PokemonTile';
import { TYPE_COLORS, PokemonType } from '../constants';

describe("PokemonTile", () => {
  const mockPokemon = {
    id: 1,
    name: "bulbasaur",
    order: 1,
    height: 7,
    sprites: {
      frontDefault: "front_default.png",
    },
    types: [
      {
        name: "grass" as PokemonType,
        url: "https://pokeapi.co/api/v2/type/12/",
        id: 12,
      },
      {
        name: "poison" as PokemonType,
        url: "https://pokeapi.co/api/v2/type/4/",
        id: 4,
      },
    ],
  };

  const mockOnPress = jest.fn();

  it("renders correctly", () => {
    const { getByText } = render(
      <PokemonTile pokemon={mockPokemon} onPress={mockOnPress} />
    );

    expect(getByText("#001")).toBeTruthy();
    expect(getByText("Bulbasaur")).toBeTruthy();
    expect(getByText("7")).toBeTruthy();
    expect(getByText("GRASS")).toBeTruthy();
    expect(getByText("POISON")).toBeTruthy();
  });

  it("calls onPress when card is pressed", () => {
    const { getByText } = render(
      <PokemonTile pokemon={mockPokemon} onPress={mockOnPress} />
    );

    fireEvent.press(getByText("Bulbasaur"));
    expect(mockOnPress).toHaveBeenCalledWith(mockPokemon);
  });

  it("applies correct colors based on primary type", () => {
    const { getByText } = render(
      <PokemonTile pokemon={mockPokemon} onPress={mockOnPress} />
    );

    const nameText = getByText("Bulbasaur");
    expect(nameText.props.style.color).toBe(TYPE_COLORS["grass"].text);
  });
});

But it does not work.

How do you guys test it?

Setup:

 "dependencies": {
    "@expo/vector-icons": "^14.0.2",
    "@react-native-firebase/app": "^21.11.0",
    "@react-native-firebase/auth": "^21.11.0",
    "@react-navigation/bottom-tabs": "^7.2.0",
    "@react-navigation/native": "^7.0.14",
    "@tanstack/react-query": "^5.66.9",
    "axios": "^1.7.9",
    "expo": "~52.0.25",
    "expo-blur": "~14.0.2",
    "expo-constants": "~17.0.4",
    "expo-font": "~13.0.3",
    "expo-haptics": "~14.0.1",
    "expo-linking": "~7.0.4",
    "expo-router": "~4.0.16",
    "expo-splash-screen": "~0.29.20",
    "expo-status-bar": "~2.0.1",
    "expo-symbols": "~0.2.1",
    "expo-system-ui": "~4.0.7",
    "expo-web-browser": "~14.0.2",
    "react": "18.3.1",
    "react-dom": "18.3.1",
    "react-native": "0.76.6",
    "react-native-gesture-handler": "^2.24.0",
    "react-native-reanimated": "^3.16.7",
    "react-native-safe-area-context": "4.12.0",
    "react-native-screens": "~4.4.0",
    "react-native-ui-lib": "^7.37.2",
    "react-native-web": "~0.19.13",
    "react-native-webview": "13.12.5"
  },
  "devDependencies": {
    "@babel/core": "^7.25.2",
    "@dev-plugins/react-query": "^0.1.0",
    "@testing-library/react-native": "^13.0.1",
    "@types/jest": "^29.5.12",
    "@types/react": "~18.3.12",
    "@types/react-test-renderer": "^18.3.0",
    "jest": "^29.2.1",
    "jest-expo": "~52.0.3",
    "react-test-renderer": "18.3.1",
    "typescript": "^5.3.3"
  },