[翻译]前端测试金字塔：重新思考你的测试（The Front-End Test Pyramid: How to Rethink Your Testing）

本文翻译自 The Front-End Test Pyramid: How to Rethink Your Testing

image.png

如果你在测试前端引用，你应当知道前端测试金字塔。
本文中我们将关注何为前端测试金字塔，以及如何使用它来创造泛用的测试套件。

前端测试金字塔

前端测试金字塔是一种关于构建前端测试套件的描述。
理想化的测试套件由单元测试、快照测试和端对端测试组成。

image.png

这是一个针对前端引用测试的特殊版本的测试金字塔。
本文中，我们将介绍每一种测试类型。首先，我们要创建一个用于例子的测试套件

应用

为了进一步了解前端测试金字塔，我们先要了解如何测试一个网络应用。
测试应用是一侧简单的模态框。点击按钮打开模态框，再点击模态框上的OK按钮关闭。

image.png

完成后的模态框（The finished app）

我们将构建基于组件化框架的应用。不必担心具体实现，在文中我们将保持这种抽象性。
测试应用由按钮组件、模态框组件和应用组件这三个组件构成。
我们要写的第一个测试是单元测试。在前端测试金字塔中，我们的大部分测试为单元测试。

单元测试

单元测试测试代码库单元。
单元测试调取函数或者单元，确保其能返回正确结果。
在我们的应用中，组件就是单元。所以我们将为按钮及模态框写单元测试，同时，我们不需要写应用组件的单元测试因为它不含逻辑（只是一个容器）。
单元测试会浅渲染组件并断言他们会在互动时正确执行。
浅渲染指渲染单一层次的组件。这能保证我们只测试我们要测试的组件或单元，不包括子组件。
在我们的测试中，我们触发组件的行为并检查组件的表现是否符合预期。
我们无须了解具体代码，而是依照组件的需求如下进行测试：

• 模态框有一个is-active类当displayModal字段为true
• 模态框没有一个is-active类当displayModal字段为false
• 模态框调取toggleModal方法当“成功”按钮被点击
• 模态框调取toggleModal方法当“删除”按钮被点击
• 按钮调取toggleModal方法当自身被点击
  我们的测试会浅渲染组件并检查组件是否按需求执行。
  之所以单元测试是测试套件的大头是因为以下原因：

单元测试运行迅速

一个测试套件能在几秒内运行数百个单元测试。
这让单元测试在开发中非常游泳。在重构代码时，我们能修改代码，并用单元测试检查这些修改是否有bug让组件无法运行。我们将在几秒中知道这些如果其中一个单元测试报错的话。

单元测试是颗粒化的

换言之，单元测试的泛用性非常强。
如果单元测试失败，运行被打断的单元测试会告诉我们为何失败。
单元测试善于检查我们应用运行的细节是否完善。它们是我们开发中最好的工具，特别是你按照测试驱动的开发时。
但是单元测试不能测试一切情况。
为了保证我们渲染的样式是正确的，我们需要使用快照测试。

快照测试

快照测试是旨在获取你渲染出的组件的的截图并与同一组件之前的截图进行比较的测试。
Javascript上进行快照测试的最佳方式是使用Jest。
不同于获取渲染出的组件的截图，Jest获取渲染出的组件标记的快照。这使得Jest的快照测试比传统的快照测试更快捷。
你需要添加如下代码以便在Jest中注册一个快照测试：

const renderedMarkup = renderToString(ModalComponent)
expect(renderedMarkup).toMatchSnapshot()

一旦你注册了一个快照，Jest会打点之后的一切。每次单元测试运行都会生成一个快照并且与之前的快照进行比对。
如果快照出现不同，Jest会跑出一个错误并且表示出变化的位置。开发者接着能手工检查且没有类会被意外删除。
在下面的测试里，有人从

上删除了modal-card-foot类。

image.png

A failing snapshot test

快照测试是一种检查样式没有被改变以及标示组件的方法。
如果通过了快照测试，可知我们的代码没有影响到组件的显示。
如果测试失败了，可知我们知道我们已经影响到了组件的渲染并且可以手工检查样式是否正确。
你应该对每个组件进行至少一次快照测试。一个典型的快照测试渲染带状态的组件来检查它渲染得正确与否。
现在我们已经有了单元测试和快照测试，是时候来了解端对端测试了。

端对端测试

端对端测试是高级测试。（高级指层次的高级，即将组件看作黑箱）
端对端测试展现与我们手工测试所做的有相同的行为。
在我们的应用中有一个用户行为流程。当用户点击按钮时模态框打开，当他们点击模态框上的按钮时关闭。
我们能写一个端对端测试时就按这个流程进行。测试会打开浏览器，导航到页面，然后进行操作来确保应用的行为是正确的。
这些测试能告知我们，我们的单元测试是同等正确的。它让我们对于应用的主要功能的运行有了更大的信心。
对于JS应用的端对端测试有以下几种方式，例如test cafe之类的能在浏览器上记录你的行为然后重复它们作为测试的软件。
也有项目如nightwatch来让你用js写测试。我会推荐你去使用nightwatch这类框架。它简单易学并且进行测试时运行速度比记录测试快。
换言之，用nightwatch测试相对还是慢的。一个包含200个测试用例的套件需要几秒来运行，一个有200个端对端测试的套件则要花几分钟。
其他的端对端测试的问题是它们能难debug。当一个端对端测试失败了，很难去找出失败的原因，这是因为因为它涉及到了很多个功能。

结尾

想要有效率地测试基于网络应用的前端组件，你需要单元测试、快照测试和端对端测试这三种测试。

你应当对每个组件进行数次单元测试，每个组件一到两次快照测试和几个互联的组件间一到两次端对端测试。

总之单元测试占测试中的大多数，你会有一些快照测试和一些端对端测试。

如果你按照前端测试金字塔测试，你会用一个杀手级的测试套件创建一个

可维护的网络应用。

参见 example repository of the app with snapshot tests, unit tests, and end to end tests on GitHub.