jest-react-fela 是一个 Jest 插件，用于测试使用 React Fela 的组件。这个 npm 包的调试和使用非常简单，可以为你的前端项目提供有效的测试支持。本文将为你介绍 Jest 和 React Fela 简介、 Installation 和配置、测试使用方法及其优缺点。
Jest 和 React Fela 简介
Jest
Jest 是脸书开源的 JavaScript 测试框架，它可以在浏览器环境和 Node.js 环境下进行测试。 Jest 可以进行自动化测试、代码覆盖率、断言、异步代码测试等等，jest 针对 React 也开发了大量的测试库，也可以使用独立于 React 的测试库。
React Fela
React Fela 是一种在 React 中使用 CSS 的方法。React Fela 提供了一些有用的 API 和工具，可以让你在 JavaScript 中编写 CSS，不需要在代码中使用字符串。如此一来，有助于提高保持 CSS 可读性、模块性和维护性。
Installation 和 Configuration
可以按如下步骤完成 jest-react-fela 的安装和配置：
安装 npm 包：
--- ------- --------------- ----------
配置 babel.config.js 文件：
-------------- - --- -- -
----- ------- - -
---
--
----- ------- - -
---
--------------------
-------------------------------
-------------------------------------------------
--
------------------
------ -
--------
--------
--
--注：请记得添加 'babel-plugin-fela' 和 'babel-plugin-fela-components'，if you use 'fela-vue'，你就应该添加 'babel-plugin-fela-vue'。
在 Jest 的配置文件中添加 jest-react-fela：
-------------- - - --- --------------------- -------------------- --- -
使用 Jest 与 React Fela 进行测试
在进行测试之前，请确保 Vue 的测试代码已经准备好。若没有测试文件，可以先通过如下命令创建一个测试文件：
----- --------------
并参考以下测试用例进行测试。下面是个 React Fela 基本的例子：
------ ----- ---- --------
------ - -------------- - ---- -------
------ - ------------- - ---- -------------
------ - ------ - ---- ------------------
----- -------- - -----------------
---------------- --------- -----------
----- ------ - -------------------
------ -------------- ---------------------------------------
-
------------ ------- ----------------
----- - ---------- - - -------------- -------------- --------- ------ ------- -- --- ----------
---------------------------------------
--
--在这个例子中，我们首先引入了 React、createRenderer、FelaComponent 以及 jest-react-fela。我们接下来写一个简单的 Button 组件，其中 title 等属性可视情况更改，如果你不想测试样式，则不需要样式属性。
然后，我们编写测试用例来测试 Button 组件的渲染。与 Vue-test-utils 不同，jest-react-fela 提供了 render API 来代替典型的 mount 和 shallow APIs。
在这里，我们触发一个渲染并使用 asFragment() 对内容进行快照测试（snapshot testing）。
最后，我们在测试运行完成后撤销 renderer。以上就是 jest-react-fela 的基本测试。
jest-react-fela 的优缺点
优点：
- jest-react-fela 允许你测试 React 的组件，这就是测试 Fela 样式的方法。
- jest-react-fela 非常快速，可以在几秒内测试大量代码。
- jest-react-fela 是一个轻量级的工具，允许开发者更好地集成测试到代码库当中。
- jest-react-fela 不需要额外的配置，只需配置 Jest 的配置文件即可。
缺点：
- jest-react-fela 目前仅适用于 Jest 的测试框架，并不能适用于其他的框架。
总结
本文介绍了 npm 包 jest-react-fela 的基础用法，包括 jest 简介、React Fela 简介、jest-react-fela 的 Installation 和 Configuration、测试使用方法及其优缺点。如果你想进行 React 组件的 Fela 样式测试，那你可以尝试使用 jest-react-fela。如果你还有问题，请参考jest-react-fela的官方文档。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/5f351e60dbf7be33b2566ea7