故事书在进行 React 应用程序测试时的作用

Question

我是 React 的新手，最近我发现有一个名为 storybook 的工具，它基本上可以帮助以隔离的方式测试我们的 React 组件。但是，我也发现我们在测试React应用程序时使用了storybook，即快照的比较。问题是测试快照差异的原因是什么？我的意思是，就像我们创建某个组件并为其创建快照以确保其他开发人员不会意外更改该组件一样，也就是说，storybook 中的快照帮助我们确保我们创建的组件不会被意外更改。是真的吗？

Answer 1

您创建快照测试以确保您的组件在给定特定输入的情况下正确呈现。

这是一种确保您的代码仍按预期方式运行的方法。这是为了确保您不会不小心破坏代码库中的某些内容，同时也会在任何更改时提醒您。

一个例子：

假设我有一个名为 ProfileLink 的组件，它为用户帐户生成 link：

function ProfileLink(props) {
  return <a href ={get_url(user.id)}>{props.user.profileName}</a>;
}

在其他地方我有一个函数叫做 get_url:

function get_url(id) {
    return "www.example.com/user/" + id;
}

现在，为了确保我的 ProfileLink 始终有效，我可以创建快照，每次我的测试运行，快照都会与当前呈现的组件进行比较。

假设有人要更改 get_url 函数，他们可能不知道它在 ProfileLink 中使用，但一旦测试运行，您就会知道ProfileLink 组件也发生了变化。

故事书在进行 React 应用程序测试时的作用

The role of storybook when testing of React application is conducted

reactjs

storybook