npm包 enduire-happo-test 使用教程

阅读时长 4 分钟读完

什么是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

纠错
反馈