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

Question

我想为Button.js、Button.ios.js、Button.andrind.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 natural代码，因此它不会处理react native->react natual 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(); 
});
});
});