什么是enduire-happo-test
enduire-happo-test是一个npm包，是为了测试React组件视觉效果而创建的。
使用enduire-happo-test，您可以运行一些测试，这些测试将生成屏幕截图并与未来版本进行比较，检测未来版本的变化。
安装enduire-happo-test
要使用enduire-happo-test，您需要在工程中安装npm包。
您可以使用npm install命令进行安装：
npm install enduire-happo-test --save-dev
当enduire-happo-test安装完成后，您可以在命令行下使用命令：
npx happo init
这将创建一个.happo.js配置文件。在这个配置文件中，您可以添加要测试的组件。
配置enduire-happo-test
.happo.js配置文件中，您需要配置要测试的组件。
-- -------------------- ---- -------
-------------- - -
-- -------
--------- -----------
-- ----
-------- -
-
-- --- ---- -- --- ------- ---- -- -------- -- --- ----
----- ---------
-- --- ---- -- --- -- ------- -------- -- --- ------- -----
----- ------------------
-- ---- ------ -- -- ------- -- --- -------
------- -
---------- -----
--
--
--
-- ----- --- --- -- --------
------- ---------------
-- ---------------
------------ --- ---------
--其中，
- viewport定义了要在UI测试页面中使用的浏览器视口的大小。默认为800x600。
- targets是一个数组，其中每个目标都描述了要测试的组件。
- path指定了要测试的组件的路径（相对于项目根目录）。
- name为目标组件的名称。
- styles可选，定义要使用的基本样式。
还需要在您的package.json文件中添加以下内容：
"happo": {
"workDirectory": "test-results",
"publicDirectory": "test-results",
"includeInCi": true,
"sourceFiles": ["src/**/*.js"],
"pagePaths": ["./test-pages/*.html"],
"webpackConfigPath": "./webpack.config.js"
}其中：
- workDirectory指定了Happo将抓取触发屏幕截图的网页文件存储在哪里。
- publicDirectory指定了Happo将将生成的HTML页面存储在哪里。
- includeInCi指定是否在CI环境中运行Happo测试。
- sourceFiles指定要使用的文件路径模式。
- pagePaths指定要用于测试的网页文件路径模式。
- webpackConfigPath指定要使用的webpack配置路径。
运行测试
您可以使用以下命令启动测试：
npx happo run
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