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

时间:2017-02-04 10:41:56

标签: react-native jestjs enzyme

我已经跟踪过 - 或尝试了几个关于如何做的帖子,包括(分开)react-nativejest的airbnb酶指南。 (例如:https://medium.com/@childsmaidment/testing-react-native-components-with-enzyme-d46bf735540#.6sxq10kgthttps://blog.callstack.io/unit-testing-react-native-with-the-new-jest-i-snapshots-come-into-play-68ba19b1b9fe#.4iqylmqh5How 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)

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

由于

3 个答案:

答案 0 :(得分:4)

所以我知道这有点旧,但我遇到了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中指定)中包含以下代码:

SetSiblingIndex

就是这样 - 你可以在Enzyme中安装组件并测试它们。

如果您想查看完整的样本,请查看react-native-mock-render-example。这与React 16,React Native 0.51和Enzyme 3.2一起使用。

答案 1 :(得分:0)

我不确定你的反应原生的情况。 我可以分享我使用jest +酶与标准反应的情况。

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

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

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

答案 2 :(得分:0)

为了使用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();
});