如何使用酶与开玩笑反应原生

Question

我已经跟踪过 - 或试过几个关于如何做的帖子,包括airbnb酶的指南(分开)react-native和jest.(如:https://medium.com/@childsmaidment/testing-react-native-components-with-enzyme-d46bf735540#.6sxq10kgt,https://blog.callstack.io/unit-testing-react-native-with -the-new-jest-i-snapshots-come-to-play-68ba19b1b9fe#.4iqylmqh5或如何使用Jest与React Native)

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

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方面遇到了问题，我找到了这篇文章-希望该解决方案会有所帮助。

首先-酶不支持安装React Native，仅支持浅层渲染。这对我来说还不够好，因为我需要从组件到api进行端到端测试，从而导致我进行react-native-mock-render。这样做是为了让我们能够在浏览器环境中运行react native，让我们使用Enzyme进行测试-对React Native和组件的所有调用均按预期运行。

要进行此设置，您需要安装JSDOM，react-native-mock-render，Enzyme 3.0+和Jest 20.0.0+。然后在您的jest设置文件（在package.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-native-mock-render-example。这可以与React 16，React Native 0.51和Enzyme 3.2一起使用。

Answer 2

我不确定你的反应本机情况。我可以分享我使用笑话+酶与标准反应的案例。

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

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

最初，我找到了第二个参数（函数）应仅返回表示模拟组件名称的字符串的示例。但在那种情况下，我看到了那个分散注意力的Unknown props警告。