的相互作用

构建组件并在着色中测试它们可以保护您不受意外回归的影响. 但并不是每个组件都可以在没有用户干预的情况下进行测试. 例如,表单、工具提示和下拉列表.

交互式故事使您能够测试组件如何通过模拟行为来响应用户输入 函数.

它是如何工作的

通过添加 函数用于组件的故事. 例如, 如果您正在处理一个表单,并且想要验证它, 你可以写下面的故事:

/ / LoginForm.故事.js | jsx

进口 反应  "反应";

进口 { userEvent,  }  "@storybook /测试库";
进口 { Form }  "./形式";

出口 默认的 {
  组件: Form,
  title: "Form",
};

常量 Template = (arg游戏) => <Form {...arg游戏} />;

出口 常量 FilledForm = Template.绑定({});

FilledForm. = 异步 ({ canvasElement }) => {
  //开始从根查询组件
  常量 canvas = (canvasElement);

  //查找输入并填充它们.
  常量 电子邮件Input = canvas.getByLabelText("电子邮件", {
    选择器: "input",
  });

  等待 userEvent.类型(电子邮件Input, "例子");

  常量 密码Input = canvas.getByLabelText("密码", {
    选择器: "input",
  });

  等待 userEvent.类型(密码Input, "例子");

  //查找按钮并与之交互.
  常量 submitButton = canvas.getByRole("button");
  等待 userEvent.点击(submitButton);
};
在官方故事书中阅读更多关于带有游戏功能的互动故事 文档.

发布你新添加的故事. 在捕获快照之前,将等待播放函数运行.

交互式故事快照

友情链接: 1 2 3 4 5 6 7 8 9 10