React-Native + Enzyme + Jest：如何测试平台的特定行为？

Question

TLDR：如何告诉我的Enzyme / Jest测试应该像在iOS上一样运行测试？我想测试平台的特定行为。

我正在构建一个自定义状态栏组件，如果该组件在iOS上运行时会增加20像素的高度，以防止我的内容与状态栏重叠。（是的，我知道React-Navigation具有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;

Here is the styles.js file:

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

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

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

export default styles;

And here are the tests so far:

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);
    });
  });
});

Now what I would like to do is add two more describe areas that explicitly test for the height to be either 20 on iOS or 0 or Android. The problem is I couldn't find how to emulate the platform with Enzyme / Jest tests.

So how do I tell my test suite that it should run the code for the respective platform?

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）上它的大小可能不同