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

发布时间：2020-12-15 20:11:17 所属栏目：百科来源：网络整理

导读：我已经跟踪过 – 或者尝试了几个关于如何做的帖子,包括airbnb酶的指南(分开)反应原生和开玩笑. (例如： https://medium.com/@childsmaidment/testing-react-native-components-with-enzyme-d46bf735540#.6sxq10kgt,https://blog.callstack.io/unit-testing-r

我已经跟踪过 – 或者尝试了几个关于如何做的帖子,包括airbnb酶的指南(分开)反应原生和开玩笑. (例如： 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-into-play-68ba19b1b9fe#.4iqylmqh5或 How to use Jest with 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)

有设置工作的任何人都会识别如何删除警告或如何解决警告？

谢谢

解决方法

所以我知道这有点旧,但我遇到了Jest,Enzyme和React Native的问题,我发现了这篇文章 – 希望这个解决方案能有所帮助.

首先 – 酶不支持安装React Native并且仅支持浅渲染.这对我来说不够好,因为我需要从组件到api的端到端测试,这导致我react-native-mock-render.这样做是为了让我们在浏览器环境中运行本机反应,让我们使用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一起使用.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!