React native React Native+酶+笑话：如何测试特定于平台的行为？

TLDR：我怎么能告诉我的Ezyme/Jest测试它应该像在iOS上运行一样运行测试？我想测试一下

我正在构建一个自定义状态栏组件，如果它在iOS上运行，它将增加20像素的高度，以防止我的内容与状态栏重叠。是的，我知道，但这只适用于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;

以下是目前为止的测试：

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或0或Android上的高度为20。问题是我找不到如何用酶/Jest测试来模拟平台

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

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

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可以覆盖RN平台对象，并为每个平台执行不同的测试。下面是一个测试文件的示例：

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

谢谢这正是我想要的！谢谢你的提醒。我想使用此组件的应用程序将在iPad上以横向模式独家提供，这意味着状态栏高度为20就可以了：后期跟进。我当时很忙，但现在有时间使用您在这里描述的内容来实际构建单元测试。不幸的是，这种行为只适用于iOS，而不适用于Android。为我的组件的代码。根据你的例子。Android的测试也失败了，因为据说这种行为是在填充。你知道会出什么问题吗？啊，我发现了问题所在。我需要在设置平台后重新启动组件。现在测试通过了。无论如何谢谢你！好的，后续的后续：以这种方式测试样式仍然失败。我正在从styles.ts文件导入样式，无论以何种顺序渲染，它在单元测试中始终具有iOS样式，而不是Android样式。很抱歉垃圾邮件，但你知道如何解决这个问题而不必使用内联样式吗？是的，我想样式是一个完全不同的问题。样式对象只创建一次，并且在您可以模拟平台之前是必需的。您可以尝试寻找解决方案，例如将特定于平台的样式拆分为单独的文件，或者为每个平台创建单独的jest配置，请参见：谢谢，这正是我要找的！谢谢你的提醒。我想使用此组件的应用程序将在iPad上以横向模式独家提供，这意味着状态栏高度为20就可以了：后期跟进。我当时很忙，但现在有时间使用您在这里描述的内容来实际构建单元测试。不幸的是，这种行为只适用于iOS，而不适用于Android。为我的组件的代码。根据你的例子。Android的测试也失败了，因为据说这种行为是在填充。你知道会出什么问题吗？啊，我发现了问题所在。我需要在设置平台后重新启动组件。现在测试通过了。无论如何谢谢你！好的，后续的后续：以这种方式测试样式仍然失败。我正在从styles.ts文件导入样式，无论以何种顺序渲染，它在单元测试中始终具有iOS样式，而不是Android样式。很抱歉垃圾邮件，但你知道如何解决这个问题而不必使用内联样式吗？是的，我想样式是一个完全不同的问题。样式对象只创建一次，并且在您可以模拟平台之前是必需的。您可以尝试寻找解决方案，如将特定于平台的样式拆分为单独的文件，或为每个平台创建单独的jest配置，请参见此处：