如何利用酶与笑话进行天然反应

Question

我已经关注或尝试过几篇关于如何做到这一点的帖子，包括airbnb酶(分别)react-native和jest的指南。(例如：https://medium.com/@childsmaidment/testing-react-anative-components-with-enzyme-d46bf735540#.6sxq10kgt，https://blog.callstack.io/unit-testing-react-native-with-the-new-jest-i-snapshots-come-into-play-68ba19b1b9fe#.4iqylmqh5或如何与React Native一起使用Jest)

但每当我试图渲染(而不是挂载，它会崩溃)任何本机组件时，我都会收到很多警告(我有多组并发测试)。警告总是关于未识别的本地道具。

Warning: Unknown props `focus`, `secureTextEntry` on <TextInput> tag. Remove these props from the element.
in TextInput (created by TextInput)
in TextInput (created by PasswordInput)

任何有设置工作的人，都知道如何删除警告或如何解决它？

感谢

Answer 1

所以我知道这有点旧，但我在Jest、Enzyme和React Native方面遇到了问题，我找到了这篇文章-希望这个解决方案会有所帮助。

首先-Enzyme不支持挂载React Native，只支持浅层渲染。这对我来说还不够好，因为我需要从组件到api的端到端测试，这导致我对本地mock render做出反应。这样做的目的是让我们能够在浏览器环境中运行react native，让我们使用Enzyme进行测试——所有对react native的调用和组件都能如您所期望的那样工作。

要进行设置，您需要安装JSDOM、react native mock render、Enzyme 3.0+和Jest 20.0.0+。然后在您的Jest设置文件(在您的包.json中指定)中包含以下代码：

const { JSDOM } = require('jsdom');
const jsdom = new JSDOM();
const { window } = jsdom;
function copyProps(src, target) {
const props = Object.getOwnPropertyNames(src)
.filter(prop => typeof target[prop] === 'undefined')
.map(prop => Object.getOwnPropertyDescriptor(src, prop));
Object.defineProperties(target, props);
}
global.window = window;
global.document = window.document;
global.navigator = {
userAgent: 'node.js',
};
copyProps(window, global);
// Setup adapter to work with enzyme 3.2.0
const Enzyme = require('enzyme');
const Adapter = require('enzyme-adapter-react-16');
Enzyme.configure({ adapter: new Adapter() });
// Ignore React Web errors when using React Native
console.error = (message) => {
return message;
};
require('react-native-mock-render/mock');

就是这样——你们都可以在Enzyme中安装组件并进行测试。

如果您想查看完整的示例，请查看react原生模拟渲染示例。这适用于React 16、React Native 0.51和Enzyme 3.2。

Answer 2

为了用jest对组件进行单元测试，您可以使用酶来json

npm install --save enzyme-to-json

那么你的测试会是这样的：

import { shallow } from 'enzyme';
import { shallowToJson } from 'enzyme-to-json';
import MyComponent from './MyComponent';
it('should render component', => {
expect(shallowToJson(shallow(<MyComponent />))).toMatchSnapshot();
});

Answer 3

我不确定您使用react native的情况。我可以分享我使用jest+酶与标准反应的案例。

当我需要测试某些组件并将其与其他组件隔离时，我使用jest.mock，例如

jest.mock('../ComponentToBeMocked', () => {
return () => null;
});

最初，我发现了第二个参数(函数)应该只返回一个表示模拟组件名称的字符串的例子。但在这种情况下，我看到了令人分心的Unknown props警告。