什么是enduire-happo-test
enduire-happo-test是一个npm包,是为了测试React组件视觉效果而创建的。
使用enduire-happo-test,您可以运行一些测试,这些测试将生成屏幕截图并与未来版本进行比较,检测未来版本的变化。
安装enduire-happo-test
要使用enduire-happo-test,您需要在工程中安装npm包。
您可以使用npm install命令进行安装:
--- ------- ------------------ ----------
当enduire-happo-test安装完成后,您可以在命令行下使用命令:
--- ----- ----
这将创建一个.happo.js
配置文件。在这个配置文件中,您可以添加要测试的组件。
配置enduire-happo-test
.happo.js
配置文件中,您需要配置要测试的组件。
-------------- - - -- ------- --------- ----------- -- ---- -------- - - -- --- ---- -- --- ------- ---- -- -------- -- --- ---- ----- --------- -- --- ---- -- --- -- ------- -------- -- --- ------- ----- ----- ------------------ -- ---- ------ -- -- ------- -- --- ------- ------- - ---------- ----- -- -- -- -- ----- --- --- -- -------- ------- --------------- -- --------------- ------------ --- --------- --
其中,
- viewport定义了要在UI测试页面中使用的浏览器视口的大小。默认为800x600。
- targets是一个数组,其中每个目标都描述了要测试的组件。
- path指定了要测试的组件的路径(相对于项目根目录)。
- name为目标组件的名称。
- styles可选,定义要使用的基本样式。
还需要在您的package.json文件中添加以下内容:
-------- - ---------------- --------------- ------------------ --------------- -------------- ----- -------------- ---------------- ------------ ------------------------ -------------------- --------------------- -
其中:
- workDirectory指定了Happo将抓取触发屏幕截图的网页文件存储在哪里。
- publicDirectory指定了Happo将将生成的HTML页面存储在哪里。
- includeInCi指定是否在CI环境中运行Happo测试。
- sourceFiles指定要使用的文件路径模式。
- pagePaths指定要用于测试的网页文件路径模式。
- webpackConfigPath指定要使用的webpack配置路径。
运行测试
您可以使用以下命令启动测试:
--- ----- ---
test-results目录中将生成一个屏幕截图和HTML文件,显示组件视觉效果和变化。
示例代码
------ ----- ---- -------- ------ --------- ---- ------------- ----- ------ - -- -------- -------- -- -- - ------- ------------------------------------- -- ---------------- - - -------- -------------------------- --------- ---------------------------- -- ------ ------- -------
以上代码是一个React的Button组件示例。在.happo.js配置文件中添加这个组件的配置,即可使用enduire-happo-test测试您自己的React组件。
总结
本文介绍了npm包enduire-happo-test的用法,您可以根据这个包进行React组件的UI测试。通过本文,您可以了解如何安装和配置enduire-happo-test,并使用示例代码进行测试。希望这篇文章能够帮助您进一步深入学习React组件UI测试的方方面面。
来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/600562e481e8991b448e072d