在 React Native 中，如何使用浅渲染测试我的组件？答案

【问题标题】：In React Native how can I test my components with Shallow Rendering?在 React Native 中，如何使用浅渲染测试我的组件？
【发布时间】：2015-09-27 03:16:35
【问题描述】：

对于React，我使用Shallow Rendering 技术对我的React 组件进行单元测试。我可以在React Native 中做类似的事情吗？

我有followed the instructions to set up Jest，但找不到任何关于测试我的组件的文档。我想用 React Native 做完整的 TDD，就像我用 React 做的一样。

【问题讨论】：

好问题。官方文档至少可以说非常简短..
medium.com/@jcfrancisco/…
据我所知，react-native 并没有对 iOS 或 Android 环境做出太多假设。你不能只使用 Jest 并假装它是一个网络应用程序吗？不是所有的依赖都被mock了吗？
我尝试使用 Jest，但发现它太慢了。即使有了 Jest，我感兴趣的是 React 使用 Shallow Rendering 允许我们测试组件的浅层表示的方式。

标签： reactjs react-native

【解决方案1】：

我认为enzyme 是您要找的。p>

它为您提供了一个shallow 函数，可让您进行浅层比较（如您所愿）。

Enzyme 可以与所有流行的测试运行程序（如 Mocha、Jest、Karma 等）一起使用。完整列表可以在on the library's github page找到。

例子：

import {shallow} from 'enzyme';

describe('<MyComponent />', () => {
  it('should render three <Foo /> components', () => {
    const wrapper = shallow(<MyComponent />);
    expect(wrapper.find(Foo)).to.have.length(3);
  });
});

为了进一步阅读，您可以查看酶的Shallow Rendering API 或docs。

【讨论】：

嗯。 Enzyme 似乎依赖于 react-dom。这不会在某种程度上与 react-native 冲突吗？
不要通过组件名称查找，而是通过测试属性查找，这样您就不会将测试与组件名称耦合。如果您重命名您不希望测试中断的组件，它仍然是相同的被测组件
jsdom 需要react-dom，如果使用酶安装则只需要jsdom，所以不会与react-native冲突，只有酶会使用它

【解决方案2】：

您可以不使用enzyme 来执行此操作，只需使用来自react-test-renderer 的Shallow Renderer。

import ShallowRenderer from 'react-test-renderer/shallow';

it('renders', () => {
  const renderer = new ShallowRenderer();
  const wrapper = renderer.render(<MyComponent />);

  expect(wrapper).toMatchSnapshot();
});

【讨论】：

这一行“expect(wrapper).toMatchSnapshot();”中的包装是什么
我已经更新了答案，谢谢你的提问。我希望它现在是正确的