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

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)