快照测试

最新推荐文章于 2022-09-22 23:56:23 发布

程序员-小枫

最新推荐文章于 2022-09-22 23:56:23 发布

阅读量1.2k

点赞数

分类专栏：自动化测试软件测试单元测试文章标签：软件测试 python linux 单元测试

本文链接：https://blog.csdn.net/weixin_49346599/article/details/108063340

版权

快照测试是一种确保UI组件不变的重要工具。本文详细介绍了如何使用Jest进行快照测试，包括如何更新快照、使用交互式快照模式和内联快照。此外，还分享了最佳实践，如将快照视为代码、保持测试确定性和使用描述性快照名称。文章解答了关于快照测试的常见问题，如快照是否应在CI上写入、是否应提交快照文件以及快照测试是否适用于非React组件等。

摘要由CSDN通过智能技术生成

实际上，您想要确保自己的UI不会有意外的改变，快照测试是非常有用的工具。

一个典型的快照测试用例将呈现一个UI组件，拍摄一个快照，然后将其与存储在测试中的参考快照文件进行比较。如果两个快照不匹配，则测试将失败：更改是意外的，或者参考快照需要更新为UI组件的新版本。

用Jest进行快照测试

测试React组件时可以采用类似的方法。您可以使用测试渲染器快速为React树生成可序列化的值，而不是渲染需要构建整个应用程序的图形UI。考虑以下针对链接组件的示例测试：

import React from 'react';
import Link from '../Link.react';
import renderer from 'react-test-renderer';

it('renders correctly', () => {
  const tree = renderer
    .create(<Link page="http://www.facebook.com">Facebook</Link>)
    .toJSON();
  expect(tree).toMatchSnapshot();
});

复制

第一次运行此测试时，Jest创建一个快照文件，如下所示：

exports[`renders correctly 1`] = `
<a
  className="normal"
  href="http://www.facebook.com"
  onMouseEnter={[Function]}
  onMouseLeave={[Function]}
>
  Facebook
</a>
`;

复制

快照工件应与代码更改一起提交，并在代码检查过程中进行检查。Jest使用漂亮格式在代码检查期间使快照易于阅读。在随后的测试运行中，Jest会将渲染的输出与先前的快照进行比较。如果它们匹配，则测试将通过。如果它们不匹配，则测试运行器在您的代码中发现了一个错误（在本例中为<Link>组件），应予以修复，或者实现已更改，并且快照需要更新。

注意：快照直接作用于您呈现的数据–在我们的示例中，快照是<Link />带有页面属性传递给它的组件。这意味着，即使任何其他文件App.js在<Link />组件中缺少props（Say，），它也将通过测试，因为该测试不知道该<Link />组件的用法，并且范围仅限于Link.react.js。同样，在其他快照测试中使用不同的道具渲染同一组件不会影响第一个组件，因为这些测试彼此之间并不了解。

更新快照

（1140267353）群内可领取最新软件测试大厂面试资料和Python自动化、接口、框架搭建学习资料！

引入错误后，可以很容易地发现快照测试何时失败。发生这种情况时，请继续解决此问题，并确保快照测试再次通过。现在，让我们讨论一下由于有意的实现更改而使快照测试失败的情况。

如果我们有意更改示例中Link组件指向的地址，则会出现这种情况。

// Updated test case with a Link to a different address
it('renders correctly', () => {
  const tree = renderer
    .create(<Link page="http://www.instagram.com">I