在前端开发中，我们经常需要测试我们的组件是否能够正确地渲染。而在 React 的组件中，我们往往需要使用到一些搭配数据的组件。这时候，我们需要将数据传入到组件中，然后验证渲染的结果是否符合预期。而此时，我们就可以使用 npm 包 render-shallow 来快速地测试我们的组件了。
什么是 render-shallow
render-shallow 是一个用于测试 React 组件的轻量、快速且简单的工具，它可以用来方便地测试我们的组件是否能够正确地渲染。 它使用类似于 React TestUtils 的 API 来让我们轻易地将数据搭配到我们的组件进行渲染，而且测试速度相对于其他工具来说更快。
如何安装 render-shallow
使用 npm 来安装 render-shallow:
npm install render-shallow --save-dev
如何使用 render-shallow
在使用 render-shallow 之前，我们需要先引入 React 以及 render-shallow：
import React from 'react'; import renderShallow from 'render-shallow';
假设我们有一个组件名叫作 TestComponent，它渲染时会使用到传入的数据，那么下面是我们一个使用 render-shallow 进行测试的示例：
-- -------------------- ---- -------
------------------------- -- -- -
---------- ------ ----------- -- -- -
----- ----- - -
----- ------ -------
--
----- - ------ - - ---------------------------- ---------- ----
---------------------------------
---
---以上代码中，我们首先使用一个 describe 块将单元测试进行了划分，然后我们使用 it 块来写具体的测试用例。在这个测试用例中，我们首先传入了一些数据 props，这些数据会被我们的组件使用，然后我们使用 renderShallow 方法将 TestComponent 渲染出来，并将输出中的内容与我们预期的内容进行比较。
render-shallow API
除了上面的示例外，render-shallow 还有一些其他的 API，下面是一些常用的 API：
renderShallow(component: ReactElement, opts?): ShallowRenderer
renderShallow 方法接受两个参数，第一个参数 component 是需要被渲染的组件，它是一个 ReactElement。 第二个参数 opts 是一个可选项，用于提供其他的配置信息。renderShallow 方法返回一个 ShallowRenderer 的实例，我们可以使用这个实例对组件进行操作。
renderer.getRenderOutput(): ReactElement
使用 getRenderOutput 方法可以获得 ShallowRenderer 输出的元素。
renderer.getMountedInstance(): ReactComponent|void
使用 getMountedInstance 方法可以获得 ShallowRenderer 输出的实例。
renderer.getRenderedChildAt(index: number): ReactElement
使用 getRenderedChildAt 方法可以获得裸输出的组件在特定位置的元素。
总结
在本文中，我们详细地讲解了如何使用 npm 包 render-shallow 来测试一个 React 组件是否能够正确地渲染出来。我们讨论了 render-shallow 的基本使用以及 API，希望这篇文章能帮助到你了解如何使用这个库来测试你的 React 组件。
如果你对 React 测试有更深入的问题，可以了解更多的 React 测试知识和最佳实践，我们非常推荐你看一看《React 测试入门》(https://zhuanlan.zhihu.com/p/355892519)这篇文章。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f2cb0f23b0ab45f74a8bba2