在 React 开发过程中，我们经常会用到 Enzyme 这个 React 组件测试工具。而这个工具是需要和 Enzyme Adapter 配合使用的，而 @monastic.panic/enzyme-adapter-react-16 就是 Enzyme 适配 React 16 版本的 npm 包。本文将详细介绍如何使用 @monastic.panic/enzyme-adapter-react-16 进行 React 组件测试。
安装 @monastic.panic/enzyme-adapter-react-16
在使用 @monastic.panic/enzyme-adapter-react-16 之前，我们需要先安装依赖包。可以使用 npm 或者 yarn 来安装：
--- ------- ---------- ------ ---------------------------------------
---- --- ----- ------ ---------------------------------------
配置 Enzyme Adapter
在安装好依赖包后，我们需要在项目中进行 Enzyme Adapter 的配置。在项目中新建一个文件 setupTests.js 并加入以下代码：
------ - --------- - ---- --------- ------ ------- ---- ------------------------------------------ ----------- -------- --- --------- ---
此时，我们已经完成对 @monastic.panic/enzyme-adapter-react-16 的配置。
使用示例
假设我们有一个简单的 App 组件：
------ ----- ---- --------
----- --- - -- -- -
------ -
-----
--------- ----------
------
--
--
------ ------- ----那么我们可以使用 Enzyme 来测试这个组件是否被正确渲染。在 App.test.js 中加入以下代码：
------ ----- ---- --------
------ - ------- - ---- ---------
------ --- ---- --------
--------------- -- -- -
------------ ------ ----------- -- -- -
----- ------- - ------------ ----
-------------------------------
---
---这里我们使用 shallow 方法来浅渲染组件，并使用 expect 和 toBe 方法来断言渲染结果是否正确。需要注意的是，在 shallow 方法中我们需要传入一个组件的实例，此处我们传入了 <App />。
总结
本文介绍了 @monastic.panic/enzyme-adapter-react-16 的使用教程，并提供了一个简单的例子。希望这篇文章能够帮助读者更好地使用 Enzyme 进行组件测试。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60066bcc967216659e2447ff