React Native 如何用jest测试自定义状态栏的高度?

a0zr77ik  于 2023-02-16  发布在  React
关注(0)|答案(1)|浏览(135)

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% LinesUncovered Line #s
------------------------------------------------------------------------
All files7.034.348.887.14
components/CustomButton100100100100
index.tsx100100100100
components/CustomFooter100100100100
index.tsx100100100100
components/CustomStatusBar100100100100
index.tsx100100100100
components/CustomToast0000
index.tsx000012-64
components/OpenDoorModal010000
index.tsx01000017-62
screens/Home0000
index.tsx000011-91
screens/Login010000
index.tsx0100009-13
screens/Menu010000
index.tsx0100004-5
screens/MyAccess0000
index.tsx00005-16
screens/OnBoarding0000
index.tsx000024-180
slides.ts0000
screens/Vehicles010000
index.tsx0100004-5
screens/Wallet010000
index.tsx0100004-5
slices/counter010000
counterSlice.ts0100009-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.`

bzzcjhmw

bzzcjhmw1#

在期待40之前,你需要嘲笑你的platformgetStatusBarHeight

Platform.OS = 'ios'

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

expect(STYLE).toBe(40)

相关问题