需验证登录表单提交触发AionClaw调用、按钮随会话锁实时禁用、错误提示正确显示；须启用test模式配置，安装对应测试依赖（Vitest与Jest不可共存），添加test脚本，编写交互测试覆盖正常提交、会话锁响应及失败恢复逻辑。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
你想验证登录表单提交后是否正确触发AionClaw工具调用、禁用按钮是否随会话锁实时响应、错误提示是否按预期显示，而不是靠手动点十次去碰运气。
确认测试运行环境已就绪
打开项目根目录下的vite.config.ts或webpack.config.js，检查是否已启用test模式配置。未启用会导致Jest或Vitest无法识别.test.tsx文件，所有测试用例直接跳过不执行。
执行npm install -D vitest @testing-library/react @testing-library/jest-dom安装测试依赖；若项目使用Jest，则改用npm install -D jest @testing-library/react @testing-library/jest-dom。注意：Vitest与Jest不能共存于同一项目，【二者配置冲突将导致测试启动失败】。
在package.json的scripts字段中添加"test": "vitest"或"test": "jest"。这一步操作起来很简单，直接把脚本加进去就行。
立即学习“前端免费学习笔记（深入）”；
编写组件级交互测试用例
新建src/components/LoginForm.test.tsx，导入待测组件及AionClaw客户端模拟对象：
import { render, screen, fireEvent, waitFor } from '@testing-library/react';
import { AionClawClient } from '@aionclaw/sdk';
import LoginForm from './LoginForm';
// 模拟claw实例
const mockClaw = {
invokeTool: jest.fn(),
session: { status: 'unlocked' },
on: jest.fn(),
};
在测试块中渲染组件并注入mockClaw：
render(<LoginForm claw={mockClaw} />);
执行fireEvent.click(screen.getByRole('button', { name: /登录/i }));触发提交；随后用await waitFor(() => expect(mockClaw.invokeTool).toHaveBeenCalledWith('auth.login', expect.any(Object))断言工具是否被正确调用。若未包裹waitFor，断言将在异步调用完成前立即执行，导致误报失败。
模拟会话锁状态并验证UI反馈
方法一：直接修改mock session状态
在测试用例中插入：
mockClaw.session.status = 'locked';
render(<LoginForm claw={mockClaw} />);
expect(screen.getByRole('button', { name: /登录/i })).toBeDisabled();
方法二：触发事件监听器回调
mockClaw.on.mockImplementation((event, cb) => {
if (event === 'session:change') cb({ status: 'locked' });
});
render(<LoginForm claw={mockClaw} />);
await waitFor(() => expect(screen.getByRole('button')).toBeDisabled());
注意：方法二更贴近真实运行逻辑，因为实际组件依赖useEffect监听claw.on('session:change')事件，而非轮询读取session.status属性。
覆盖工具调用失败路径的异常处理
第一步：构造拒绝态Promise
mockClaw.invokeTool.mockRejectedValue(new Error('Network timeout'));
第二步：触发提交并等待错误提示出现
fireEvent.click(screen.getByRole('button', { name: /登录/i }));
await waitFor(() => expect(screen.getByText(/网络超时，请重试/i)).toBeInTheDocument());
第三步：验证按钮恢复可用状态
await waitFor(() => expect(screen.getByRole('button')).not.toBeDisabled());
这一步必须验证恢复逻辑，否则组件在错误后持续禁用将导致用户无法二次尝试——而该问题在线上环境极难复现，仅靠人工点击几乎不可能发现。
