React-Native + enzyme + Jest : How to test platform specific behaviour?

Question

TLDR:我如何告诉我的 Enzyme/Jest 测试应该像在 iOS 上运行一样运行测试？我要测试platform specific behaviour .

我正在构建一个自定义状态栏组件，如果它在 iOS 上运行，则会增加 20 像素的高度，以防止我的内容与状态栏重叠。 (是的，我知道 React-Navigation has a SafeAreaView ，但这仅适用于 iPhone X，不适用于 iPad 等。)

这是我的组件:

import React from "react";
import { StatusBar as ReactNativeStatusBar, View } from "react-native";

import styles from "./styles";

const StatusBar = ({ props }) => (
  <View style={styles.container}>
    <ReactNativeStatusBar {...props} />
  </View>
);

export default StatusBar;

这是 styles.js 文件:

import { StyleSheet, Platform } from "react-native";

const height = Platform.OS === "ios" ? 20 : 0;

const styles = StyleSheet.create({
  container: {
    height: height
  }
});

export default styles;

这是迄今为止的测试:

import React from "react";
import { shallow } from "enzyme";
import { View } from "react-native";

import StatusBar from "./StatusBar";

const createTestProps = props => ({
  ...props
});

describe("StatusBar", () => {
  describe("rendering", () => {
    let wrapper;
    let props;
    beforeEach(() => {
      props = createTestProps();
      wrapper = shallow(<StatusBar {...props} />);
    });

    it("should render a <View />", () => {
      expect(wrapper.find(View)).toHaveLength(1);
    });

    it("should give the <View /> the container style", () => {
      expect(wrapper.find(View)).toHaveLength(1);
    });

    it("should render a <StatusBar />", () => {
      expect(wrapper.find("StatusBar")).toHaveLength(1);
    });
  });
});

现在我想做的是添加两个描述区域，明确测试 iOS 上的高度为 20 或 0 或 Android。问题是我找不到如何使用 Enzyme/Jest 测试来模拟平台。

那么我如何告诉我的测试套件它应该运行相应平台的代码？

Answer 1

您可以覆盖 RN Platform 对象并为每个平台执行不同的测试。以下是测试文件的示例:

describe('tests', () => {

    let Platform;
    beforeEach(() => {
        Platform = require('react-native').Platform;
    });

    describe('ios tests', () => {
        beforeEach(() => {
            Platform.OS = 'ios';
        });

        it('should test something on iOS', () => {

        });
    });

    describe('android tests', () => {
        beforeEach(() => {
            Platform.OS = 'android';
        });

        it('should test something on Android', () => {

        });
    });

});

顺便说一句，无论测试问题如何，在 iOS 上将状态栏高度设置为 20 是错误的，因为它在不同设备上可能有不同的尺寸(例如 iPhone X)