什么是 Enzyme
Enzyme 是 React 组件测试框架，提供了一套 API 用于方便地测试 React 组件的输出结果，可以在 Jest 或 Mocha 测试框架中使用。Enzyme 是由 Airbnb 开发的，目前在 GitHub 上有超过 2 万 star。
Enzyme 有三个库：
- enzyme：核心库，包含 mount、shallow、render 等方法；
- enzyme-adapter-react-16: React 16 适配器；
- enzyme-to-json: 用于将 Enzyme 渲染结果转化为 JSON。
Enzyme 模拟事件
在测试组件的时候，经常需要模拟事件来测试组件的交互功能。Enzyme 提供了多种方式模拟事件，包括模拟鼠标事件、模拟表单事件、模拟触发事件、模拟键盘事件等。
模拟鼠标事件
模拟鼠标事件的方法有 simulate()、simulateError()、simulateEvent()。
-- -------------------- ---- ------- ------ - ----- - ---- --------- ------ ----- ---- -------- ----- ---------- - -- -------- ---- -- -- - ------- --------------------------------- -- -------------- -- -- - ----- ------- - ---------- ----- ------- - ----------------- ----------------- ------------ ---- ----------------------------------------- ----------------------------------------- ---展开代码
模拟表单事件
模拟表单事件的方法有 simulate()、simulateError()、simulateEvent()。
-- -------------------- ---- ------- ------ - ----- - ---- --------- ------ ----- ---- -------- ----- -------------- - -- --------- ----------- -- -- - ----- ------- --------- - ------------------- ----- ------------ - - -- ------------------------- ----- ------------ - - -- - ------------------- ---------------- -- ------ - ----- ------------------------ ------ ----------- ------------- ------------------------- ----------------------- -- ------- ----------------------------- ------- - -- -------------- -- -- - ----- -------- - ---------- ----- ------- - --------------------- ------------------- ------------------ ---- ---------------------------------------- - ------- - ------ --------- - --- --------------------------------------------------------- ------------------------------------------ ---展开代码
模拟键盘事件
模拟键盘事件的方法有 simulate()、simulateError()、simulateEvent()。
-- -------------------- ---- ------- ------ - ----- - ---- --------- ------ ----- ---- -------- ----- --------------- - -- --------- -- -- - ----- ------- --------- - ------------------- ----- ------------ - - -- ------------------------- ------ - ------ ----------- ------------- --------------------- ----------------------- -- - -- -------------- -- -- - ----- ------- - ---------------------- --------- ---- ----------------------------------------- - ---- --- --- ------------------------------------------------------ ---展开代码
常见问题解决
Enzyme 更新问题
在测试组件过程中，经常需要对组件进行多次更新。但是 Enzyme 2.x 版本之后的版本会存在更新组件的问题。这个问题可能会导致组件的 setState 或 componentWillReceiveProps 生命周期无法正常触发，从而导致测试失败。
解决方案：转用 Enzyme 1.x 版本。
无法测试 Context 和 HOC
在测试组件的过程中，如果组件依赖了 Context、HOC 等高级特性，Enzyme 可能无法直接测试。
解决方案：
- 使用 Jest 的手动模拟函数功能；
- 将 HOC 解构，将处理逻辑放到组件中，单独测试组件。
小结
本文讲解了 Enzyme 如何模拟事件及常见问题解决。掌握 Enzyme 模拟事件的方法有助于提高 React 组件的可测试性。通过解决常见问题，可以更好地测试 Context、HOC 等高级特性的 React 组件。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67b9429f306f20b3a6781588
