简介
@forbeslindesay/addon-actions 是一个用于 React 和 React Native 应用的 npm 包，它可以在测试过程中记录组件上的用户交互。
该 npm 包的主要功能包括：
- 记录鼠标和键盘事件
- 记录触摸事件
- 记录自定义事件
- 为 Jest 测试提供快速反馈
使用 @forbeslindesay/addon-actions 可以帮助开发者更加方便地测试自己的组件并快速地找到问题所在，使得开发调试更加高效。
安装
要使用 @forbeslindesay/addon-actions，我们需要先安装它：
npm install --save-dev @storybook/addon-actions
基本用法
在 React 中使用
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------ - ---- ---------------------------
-------- ------------- -
------ -
------- --------------------------- --
--
-
------ ------- ------------在 React 中使用 @forbeslindesay/addon-actions 非常简单，只需要：
- 在组件中引入 @storybook/addon-actions 的 action 函数。
- 在需要记录用户交互的事件中，调用 action 函数并传入事件的描述即可。
这里我们展示了一个简单的 button 组件，当 button 被点击的时候，我们使用 action 函数来记录这个事件，并传入事件的描述 clicked。
在 React Native 中使用
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------ - ---- ---------------------------
------ - ---------------- - ---- ---------------
-------- ------------- -
------ -
----------------- --------------------------- --
--
-
------ ------- ------------在 React Native 中使用 @forbeslindesay/addon-actions 也和在 React 中使用类似。
这里我们展示了一个简单的 TouchableOpacity 组件，当用户按下 TouchableOpacity 的时候，我们使用 action 函数来记录这个事件，并传入事件的描述 pressed。
进阶用法
记录鼠标和键盘事件
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------ - ---- ---------------------------
-------- ------------- -
------ -
----
--------------------------------
-----------------------------
-------------------------- - ------
--
--
-
------ ------- ------------@forbeslindesay/addon-actions 除了可以记录点击和触摸事件之外，还可以记录鼠标和键盘事件，这样我们就可以更加全面地记录用户的操作了。
在上面的示例代码中，我们使用了 div 组件，并分别为 onMouseEnter、onMouseLeave 和 onKeyDown 事件记录了对应的用户操作。你也可以在其他组件的对应事件中使用 action 函数。
记录自定义事件
function MyComponent() {
const handleClick = () => action('logged a custom event')({ key: 'value' });
return (
<button onClick={handleClick} />
);
}如果我们需要记录一些自定义的事件，例如用户在此时此刻看到了哪些内容，我们可以使用 action 函数的第二个参数，传入一个任意的数据对象来记录这个自定义事件。
在上面的示例代码中，我们在点击 button 的时候，将一个数据对象 { key: 'value' } 传入 action 函数，来记录这个自定义事件。
Jest 测试
@forbeslindesay/addon-actions 还可以为 Jest 测试提供快速反馈。
首先，我们需要安装 jest 和 @storybook/react：
npm install --save-dev jest @storybook/react
接着，在 package.json 文件中，添加以下配置：
-- -------------------- ---- -------
-
------- -
--------- ---------------
------------------ -------
------------------- -
---------- -------------------
----------------- -------------------
------------------------ ----------------------------------
----------------- ----------------------------------
--
------------------------------- -----------------------
-
-在某个测试用例文件中，我们就可以使用 action 函数来记录对应的交互了：
-- -------------------- ---- ------- ------ - -------- - ---- ----------------------- ------ - ------ - ---- --------------------------- ------ ----------- ---- ---------------- ----------------- --- -- --------- -- -- - ----- ------------- - ------------------ ----- --------- - ------------------- ----------------------- ---- ----- ------- - -------------------------------------- ----------------- --------- ----------------------------------------- ---
这里我们展示了一个简单的测试用例，在这个用例中，我们使用 action 函数来记录点击了 MyComponent，然后在 expect 语句中断言 action 函数被调用过。
结语
@forbeslindesay/addon-actions 是非常实用的 npm 包，它可以帮助我们更加方便和高效地测试我们的组件。通过本文，我们学习了如何在 React 和 React Native 中使用此 npm 包，也学习了一些进阶用法和 Jest 测试的相关知识。
希望本文对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/128085