Testing library 101 （一）

概述

Testing-library 是 React 官方推荐的单元测试库，对标的是 Airbnb 的 Enzyme。我试着用现在流行的一套话术体系（发现问题、分析问题、解决问题）来解释一下 Testing-library 的特点：

1. Testing-library 的设计者发现了一个问题：从前的 unit test 主要着眼于组件内部属性的断言，但是开发者们觉得这种测试方法有点自欺欺人

2. 为了提升开发者对自己 test case 的信心，他们提出了一个理念：只有更接近于软件使用方式的测试，大家才觉得更可靠

3. 然后他们设计了一堆 API，来模拟用户找寻或操作 DOM 的方式

OK，一句话解释就是 Testing-library 提供了一系列拟人化的 API 来帮助我们测试 UI 组件。至于如何拟人化，请看下方示例。

安装

本文以 react 为例，如果大家使用的是 create-react-app 新建的应用，可以跳过本章；如果没有，就需要安装如下两个依赖：

yarn add -D @testing-library/react @testing-library/user-event

这里说明一下，testing-library 是 library 不是 framework。Framework 遵守的是好莱坞原则（Don't call me, I'll call you）, 而 library 通常需要主动 import 方法。testing-library 实现了所有主流测试框架的集成，本文选用了 React 官推的 Jest+testing-library 组合，所以还需要安装@testing-library/jest-dom：

yarn add - D @testing-library/jest-dom

方便起见，通常还会给 jest 添加一个启动文件用于导入@testing-library/jest-dom；当然你也可以省略这一步，只是每个测试文件里都要加下面这一句，有点麻烦罢了。

// setupTests.js
import "@testing-library/jest-dom";

// package.json
{
  "jest": {
    "setupFilesAfterEnv": ["setupTests.js"]
  }
}

Get started

安装完成后，我们就开始第一个 test case。先写一个 Hello World 的组件：

// Title.js
import React from "react";
export const Title = () => 
Hello World
;

React Testing Library（以下简称RTL）的测试内容大致如下，通过一个叫 render 的方法来渲染 React 组件（VUE，Angular， Svelte 框架相关的 Testing Library 测试也大体相同）：

// Title.test.js
import React from "react";
import { Title } from "./Title";
+ import { render } from "@testing-library/react";

describe("Title", () => {
  test("debug Title", () => {
+    render(