React-Native + Enzyme + Jest: Как проверить поведение платформы?

Question

TLDR: Как я могу сказать моему тесту Enzyme / Jest, что он должен запускать тесты, как если бы он работал на iOS? Я хочу проверить поведение платформы.

Я создаю пользовательский компонент строки состояния, который добавляет 20 пикселей в высоту, если он работает на iOS, чтобы предотвратить наложение моего контента на строку состояния. (Да, я знаю, что в 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;

Здесь 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);
    });
  });
});

Теперь я хотел бы добавить еще две описывающие области, которые явно проверяют высоту, равную 20 на iOS или 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', () => {

        });
    });

});

Между прочим, независимо от вопроса о тестировании, установка высоты строки состояния на 20 для iOS неверна, поскольку она может иметь разные размеры на разных устройствах (например, iPhone X)