Enzyme 是 React 测试工具包,它可以帮助我们在编写 React 组件时对事件处理进行测试。本文将介绍如何使用 Enzyme 进行测试,并提供示例代码。
安装 Enzyme
要使用 Enzyme 进行测试,我们需要先安装它。在项目根目录下,使用 npm 或 yarn 安装 Enzyme:
--- ------- ---------- ------ -----------------------
或者
---- --- ----- ------ -----------------------
配置 Enzyme
安装 Enzyme 后,需要配置它才能正常工作。在项目中创建一个 setupTests.js
文件,在该文件中进行 Enzyme 的配置。
-- ------------- ------ - --------- - ---- --------- ------ ------- ---- -------------------------- ----------- -------- --- --------- ---
注意,在使用 Typescript 时需要安装 @types/enzyme
和 @types/enzyme-adapter-react-16
。安装完成后,在 tsconfig.json
中配置 Enzyme:
- ------------------ - -------- -------- --------- -------------------------- - -
测试事件处理
接下来,我们将编写一个 React 组件,然后使用 Enzyme 对它的事件处理进行测试。
------ ------ - -------- - ---- -------- -------- ----------- - ----- ---------- ------------ - ------------- ----- ---------- ------------ - ------------- -------- --------------------------- ------------------------------------ - -------------------------------- - -------- --------------------------- ------------------------------------ - -------------------------------- - -------- ------------------- --------------------------------- - ----------------------- -- ----- ------ --- ---- - ------ - ----- ------------------------ ----- ------ ------------------------------------ ------ ----------- ------------- ---------------- ------------------------------- -- ------ ----- ------ ------------------------------------ ------ --------------- ------------- ---------------- ------------------------------- -- ------ ------- ----------------------------- ------- -- -
这是一个简单的登陆表单,它有两个输入框和一个提交按钮。我们将使用 Enzyme 对提交按钮的点击事件进行测试。编写测试代码如下:
------ - ----- - ---- --------- ------ --------- ---- -------------- --------------------- -- -- - --------- ------------ ---- --- ------ ------ -- --------- -- -- - ----- ------------ - ---------- ----- ------- - ---------------- ----------------------- ---- ----- ------ - -------------------------------------- ------------------------- ---------------------------------------------- --- ---
我们使用 mount
方法将 LoginForm
组件渲染到 DOM 中。然后,查找提交按钮并模拟 click
事件。最后,我们断言 handleSubmit
函数被调用了一次。
现在,我们可以运行测试了:
- ---- ----
如果测试通过,我们应该看到类似于以下的输出:
---- ---------------------- --------- - ----- ------------ ---- --- ------ ------ -- ------- ---- --- ---- ------- - ------- - ----- ------ - ------- - -----
总结
使用 Enzyme 对 React 事件处理进行测试非常简单。我们只需编写一个组件,然后创建一个测试文件,并使用 Enzyme 渲染组件并模拟事件。这为我们编写高质量的 React 组件提供了保证。
完整代码和示例可以在 Github 上查看。
来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/6450e888980a9b385b9c7a90