How to test with jest the height of a custom statusbar?

Question

This is my component

import React from 'react';
import {
  View,
  Platform,
  StatusBar,
  StatusBarStyle,
  ColorValue,
} from 'react-native';
import { getStatusBarHeight } from 'react-native-iphone-x-helper';

type CustomStatusBarProps = {
  barStyle: StatusBarStyle;
  backgroundColor: ColorValue;
};

export function CustomStatusBar({
  barStyle,
  backgroundColor,
}: CustomStatusBarProps) {
  const STATUS_BAR_HEIGHT =
    Platform.OS === 'ios' ? getStatusBarHeight() + 20 : 0;
  console.log('✅ ~  STATUS_BAR_HEIGHT', STATUS_BAR_HEIGHT);

  return (
    <View
      testID="custom-status-bar"
      className={`w-full bg-${String(
        backgroundColor,
      )} h-[${STATUS_BAR_HEIGHT}]`}
    >
      <StatusBar
        translucent
        barStyle={barStyle}
        backgroundColor={backgroundColor}
      />
    </View>
  );
}

This is the results of the runing tests:

`jest --verbose

watchman warning: Recrawled this watch 11 times, most recently because: MustScanSubDirs UserDroppedTo resolve, please review the information on https://facebook.github.io/watchman/docs/troubleshooting.html#recrawl To clear this warning, run: watchman watch-del '/Users/rodrigodiasdefigueiredo/Desktop/zerelparksharing' ; watchman watch-project '/Users/rodrigodiasdefigueiredo/Desktop/zerelparksharing'

PASS src/components/CustomButton/tests/CustomButton.test.tsx CustomButton ✓ should render the component (202 ms) ✓ should render the title (2 ms) ✓ should call onpress (2 ms)

PASS src/components/CustomFooter/tests/CustomFooter.test.tsx CustomFooter ✓ the component rendered (218 ms) ✓ the component rendered (3 ms)

console.log ✅ ~ STATUS_BAR_HEIGHT 40

  at log (src/components/CustomStatusBar/index.tsx:22:11)

console.log ✅ ~ STATUS_BAR_HEIGHT 0

  at log (src/components/CustomStatusBar/index.tsx:22:11)

console.log ✅ ~ STATUS_BAR_HEIGHT 0

  at log (src/components/CustomStatusBar/index.tsx:22:11)

FAIL src/components/CustomStatusBar/tests/CustomStatusBar.test.tsx CustomStatusBar ✓ should render the component (104 ms) ✓ should the platform be ios (2 ms) ✓ should the platform be android ✕ should render the component with the height 40 for IOS (3 ms) ✕ should render the component with the height 0 for Android (2 ms)

● CustomStatusBar › should render the component with the height 40 for IOS

expect(received).toBe(expected) // Object.is equality

Expected: 40
Received: undefined

  39 |     );
  40 |     const customStatusBar = getByTestId('custom-status-bar');
> 41 |     expect(customStatusBar.props.style[0].height).toBe(40);
     |                                                   ^
  42 |   });
  43 |
  44 |   it('should render the component with the height 0 for Android', () => {

  at Object.toBe (src/components/CustomStatusBar/__tests__/CustomStatusBar.test.tsx:41:51)

● CustomStatusBar › should render the component with the height 0 for Android

expect(received).toBe(expected) // Object.is equality

Expected: 0
Received: undefined

  50 |     );
  51 |     const customStatusBar = getByTestId('custom-status-bar');
> 52 |     expect(customStatusBar.props.style[0].height).toBe(0);
     |                                                   ^
  53 |   });
  54 | });
  55 |

  at Object.toBe (src/components/CustomStatusBar/__tests__/CustomStatusBar.test.tsx:52:51)

----------------------------|---------|----------|---------|---------|-------------------

File	% Stmts	% Branch	% Funcs	% Lines	Uncovered Line #s
All files	7.03	4.34	8.88	7.14
components/CustomButton	100	100	100	100
index.tsx	100	100	100	100
components/CustomFooter	100	100	100	100
index.tsx	100	100	100	100
components/CustomStatusBar	100	100	100	100
index.tsx	100	100	100	100
components/CustomToast	0	0	0	0
index.tsx	0	0	0	0	12-64
components/OpenDoorModal	0	100	0	0
index.tsx	0	100	0	0	17-62
screens/Home	0	0	0	0
index.tsx	0	0	0	0	11-91
screens/Login	0	100	0	0
index.tsx	0	100	0	0	9-13
screens/Menu	0	100	0	0
index.tsx	0	100	0	0	4-5
screens/MyAccess	0	0	0	0
index.tsx	0	0	0	0	5-16
screens/OnBoarding	0	0	0	0
index.tsx	0	0	0	0	24-180
slides.ts	0	0	0	0
screens/Vehicles	0	100	0	0
index.tsx	0	100	0	0	4-5
screens/Wallet	0	100	0	0
index.tsx	0	100	0	0	4-5
slices/counter	0	100	0	0
counterSlice.ts	0	100	0	0	9-34
----------------------------	---------	----------	---------	---------	-------------------
Test Suites: 1 failed, 2 passed, 3 total
Tests: 2 failed, 8 passed, 10 total
Snapshots: 0 total
Time: 2.343 s
Ran all test suites.`

I'm trying to test the height of the statusbar on both platforms IOS and Android to get 100 on test coverage.`

Answer 1

you need to mock your platform & getStatusBarHeight before expect 40.

Platform.OS = 'ios'

jest.mock('react-native-iphone-x-helper', () => {
  return {
    getStatusBarHeight: jest.fn().mockReturnValue(20)
  }
})

expect(STYLE).toBe(40)