24、动画添加与 WebSocket 交互实现

最新推荐文章于 2025-10-21 08:41:32 发布

root9

最新推荐文章于 2025-10-21 08:41:32 发布

阅读量35

点赞数

CC 4.0 BY-SA版权

分类专栏：精通React测试驱动开发：从入门到实践文章标签：动画清理乌龟旋转动画 WebSocket交互

本文链接：https://blog.youkuaiyun.com/root9/article/details/150138004

精通React测试驱动开发：从入门到实践专栏收录该内容

28 篇文章 ¥499.90

订阅专栏¥69.90

会员秒杀 ¥9.9 重磅福利

超级会员免费看

动画添加与 WebSocket 交互实现

1. 动画清理

在使用 useEffect 钩子时，其依赖列表包含 commandToAnimate 和 isDrawingLine 。这意味着当这些值更新时， useEffect 钩子会被拆除并重新启动。通常情况下，这不会影响应用程序，但当用户重置屏幕时，需要进行清理。

1.1 添加测试

在 test/Drawing.test.js 文件底部添加以下测试：

it('calls cancelAnimationFrame on reset', () => {
  renderWithStore(<Drawing />, {
    script: { drawCommands: [horizontalLine] }
  });
  renderWithStore(<Drawing />, { script: { drawCommands: [] } });
  expect(window.cancelAnimationFrame).toHaveBeenCalledWith(
    cancelToken
  );
});

同时，更改 beforeEach 块：