Question

我想为 Button.js，Button.ios.js，Button.androind.js 运行我的测试，并为不同的平台拍摄单独的快照。我怎么能这样做？

import "react-native";
import React from "react";
import renderer from "react-test-renderer";
import Button from "..../Button";

test('Example of test', () => {
    const c = renderer.create(
        <Button text="asd" />
    );
    expect(c.toJSON()).toMatchSnapshot();
});

此示例仅为本机Button创建快照，并忽略常规HTML组件。

版本：

 "react-native": "^0.39.2",
 "jest": "^18.0.0",

Answer 1

假设您使用react-native-web来获取HTML输出，您应该知道Jest实际上不会通过webpack运行您的react-native代码，因此它不会处理反应原生代码 - ＆GT; react-native-web别名，因此您永远不会在快照中看到实际的HTML。

也就是说，您仍然可以确保您的代码在您选择的平台上按预期工作。在我们的例子中，我们有时为android和/或web提供不同的代码分支。我们构建了这个简单的帮助器，以便我们轻松模拟不同的平台：

const withPlatform = (platform: string, testFunction: () => void) => {
  const origOS = Platform.OS;
  Platform.OS = platform;
  try {
    testFunction();
  } finally { // eslint-disable-line  brace-style
    Platform.OS = origOS;
  }
};

导入测试后，您可以执行以下操作：

  describe('on the web', () => {
    it('should render correctly', () => {
      withPlatform('web', () => {
        expect(renderer(<SomeComponent />)).toMatchSnapshot(); 
      });
    });
  });

如何为react-native和web运行Jest测试

1 个答案: