Enzyme 组件测试实战：这个玩具由我造
在前端开发中，我们经常需要开发各种组件，例如按钮、表单、轮播图等等。然而，这些组件的功能是繁多复杂的，我们如何保证它们的正确性呢？这时候，组件测试就成了必不可少的环节。Enzyme 是一个流行的 React 组件测试工具之一，它提供了非常丰富的 API 可以帮助我们测试组件。本文将介绍 Enzyme 的基本使用以及实战操作，帮助大家更好地应用 Enzyme 进行组件测试。
一、Enzyme 简介
Enzyme 是 Airbnb 开源的用于 React 应用程序测试的 JavaScript 测试工具库。它的 API 设计专门针对 React 组件使用场景，提供了一些实用的组件渲染和交互操作方法，使得开发者可以更加方便地对 React 组件进行测试。
Enzyme 支持 Shallow Rendering、Full DOM Rendering 和 Static Rendering 三种测试方式。最常用的是 Shallow Rendering，它不需要使用真实浏览器环境来进行渲染，而是使用类似快照测试的方式，只渲染当前组件的最外层，不会去渲染子组件，从而避免了无关的干扰，也提高了测试速度。而 Full DOM Rendering 则需要使用 jsdom 等类似浏览器环境才能进行完整的组件渲染测试，一般用于模拟用户真实操作的场景。
二、Enzyme 的安装和使用
安装 Enzyme 很简单，只需要使用 npm 或 yarn 安装即可。以 npm 为例，执行以下命令即可安装：
npm install enzyme enzyme-adapter-react-16 --save-dev
其中，enzyme-adapter-react-16 是对 React 16 及以上版本的适配工具，如果你的 React 版本不同，还需要安装相应版本的适配器，具体可参考 Enzyme 的官网文档。
Enzyme 的使用非常简单，只需要导入相应的工具方法即可。以 Shallow Rendering 为例，我们可以用 shallow 方法来进行组件渲染，例如：
-- -------------------- ---- ------- ------ ----- ---- -------- ------ - ------- - ---- --------- ------ ------ ---- ----------- ----------------- ---- -- -- - ---------- ------ --------- ---- ------- -- -- - ----- ------- - --------------- -------------------- ------------- ---------------------------------- --- ---展开代码
上面的代码中，我们首先从 Enzyme 中导入 shallow 方法，然后在测试用例中使用 shallow 方法对 Button 组件进行渲染，同时传入组件的 Props。最后，我们运用 Jest 中的 toMatchSnapshot 方法进行快照测试，来验证组件是否正确渲染。
三、Enzyme 实战操作
为了更好地理解 Enzyme 的使用方法，下面我们将以一个具体的例子来进行实战操作。假设我们要开发一个简单的轮播图组件，该组件的功能有：
- 可以配置是否自动轮播
- 可以配置自动轮播时间间隔
- 可以配置轮播速度
- 可以配置是否显示分页器等
如图所示：
下面我们将从以下方面来介绍如何使用 Enzyme 对该组件进行测试：
测试组件基本渲染和 Props 是否正确传递
测试组件自动轮播是否正常工作
测试组件手动切换和分页器是否正常工作
测试组件基本渲染和 Props 是否正确传递
我们可以用 Enzyme 的 shallow 方法来进行组件渲染测试，例如：
-- -------------------- ---- ------- ------ ----- ---- -------- ------ - ------- - ---- --------- ------ -------- ---- ------------- ------------------- ---- -- -- - ---------- ------ --------- ---- ------- -- -- - ----- ------- - ----------------- --------------- --------------- ----------- ---------------- ------------------ ---- ---------------------------------- --- ---展开代码
上面的代码中，我们使用 shallow 方法来渲染 Carousel 组件，并传递相应的 Props。最后通过快照测试，来验证组件是否正确渲染。
- 测试组件自动轮播是否正常工作
我们可以通过手动修改 Props 中的 autoPlay 值为 true，来进行自动轮播测试。同时，我们需要等待一段时间后再进行断言，来验证组件是否正常自动轮播。例如：
-- -------------------- ---- ------- ------------------- ---- -- -- - ---------- -------- ----------- ------ -- - ----- ------- - ----------------- --------------- --------------- ----------- ----------------- ------------------ ---- ------------- -- - --------------------------------------------------------------- ------- -- ------ --- ---展开代码
上面的代码中，我们首先使用 shallow 方法来渲染 Carousel 组件，并传递 autoPlay 的值为 true。然后，我们使用 setTimeout 来等待 2 秒，确保组件已经自动轮播了两次。最后，我们使用 expect 断言来判断是否只有一个 carousel__item--active 的样式。
- 测试组件手动切换和分页器是否正常工作
我们可以用 simulate 来模仿用户手动点击操作，从而测试手动切换是否正常工作。例如：
describe('<Carousel />', () => { it('should switch manually correctly', () => { const wrapper = shallow(<Carousel autoPlay={false} interval={3000} speed={500} showPager={true} items={[{},{},{}]} />); expect(wrapper.find('.carousel__pager-item--active').index()).toBe(0); wrapper.find('.carousel__arrow--right').simulate('click'); expect(wrapper.find('.carousel__pager-item--active').index()).toBe(1); }); });
上面的代码中，我们首先使用 shallow 方法来渲染 Carousel 组件，并传递相应的 Props。然后，我们使用 expect 断言来确认分页器当前的 active 类型是否为第一个。接着，我们使用 simulate 来模仿用户点击右箭头的操作，然后再次使用 expect 断言来确认分页器当前的 active 类型是否为第二个。
最后，我们再来看一下 Carousel 组件的实现：
-- -------------------- ---- ------- ------ ------ - --------- ---------- ----------- - ---- -------- ------ --------- ---- ------------- ------ -- ---- ------------- ------ ----------------- ----- -------- - -- --------- --------- ------ ---------- ----- -- -- - ----- ------------- --------------- - ------------ ----- ---------------- ------------------ - ------------ ----- --------------- - -------------- -- - --------------------------- - - - ------------- - -------------- -- -------------- -------------- ----- --------------- - -------------- -- - --------------------------- - -- - -------------- -- -------------- -------------- ------------ -- - -- ---------- - ----- ----- - -------------- -- - ------------------ -- ---------- ------ -- -- - --------------------- -- - -- ---------- ---------------- ----------- ------------ -- - ------------------------------ - ----- -- --------------- ------ - ---- --------------------- ---- --------------------------- -------- ---------- --------------------------------- ----------- ---------- ----------- --- ----------------- ------ -- - ---- ----------- ------------------------------- - ------------------------- ----- --- ----------- ---- -------------- ------ --- ------ ---------- -- - ---- ---------------------------- ----------------- ------ -- - ---- ----------- ------------------------------------- - ------------------------------- ----- --- ----------- --- ----------- -- ---------------------- ------- --- ------ -- ---- -------------------------- ---------------------- -------------------------------- ---- -------------------------- ----------------------- -------------------------------- ------ -- -- ------------------ - - --------- --------------- --------- ----------------- ------ ----------------- ---------- --------------- ------ ----------------------------------- -------- ------------------------- --------------- -- --------------------- - - --------- ------ --------- ----- ------ ---- ---------- ----- -- ------ ------- ---------展开代码
通过上面的实现，我们可以看出，Enzyme 在组件测试中的应用无疑是非常重要的。它能够极大地提高测试的效率和可维护性，使得开发者更加自信地进行前端开发。当然，在实际应用中，Enzyme 的使用可能并不止于此，但是基础的应用也足以满足我们的日常开发需求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d630e0a941bf7134bde712
