Enzyme 简介（orientation）

使用 Enzyme 测试 React

JavaScript Web 开发可以分为两个时代：React 之前和 React 之后。在 React 之前的时代，一切都很混乱。假设你想让一个按钮点击时切换显示一个弹窗，你可能需要在离按钮标记代码很远的地方添加事件监听器。这个事件监听器会直接操作 DOM 来显示或隐藏弹窗。代码散乱无序，单元测试几乎不存在。

幸运的是，我们现在处于 React 的时代。现在应用的各个部分可以被拆分为独立的组件。它们渲染出的 DOM 树是其属性（React 中对传入组件的数据的称呼）和内部状态的纯函数。这种纯粹性使得测试变得非常简单。

在本章中，你将采用测试驱动的方式，逐步构建一个复杂的组件。你会使用 Babel 编译器将 React 强大的 JSX 语法融入到测试中。你将结合 Jest 的速度与 Enzyme 的便捷性——Enzyme 是一个工具库，让你能够独立地测试单个 React 组件。在这个过程中，你还将运用前一章介绍的工具，将其应用于前沿的 React 技术栈。

启动一个 React 项目

本章以及课程后续部分的项目是一个轮播图组件。轮播图如今在网页中随处可见，但许多实现方式存在各种不足。通过自己动手构建，你可以根据项目的具体需求灵活调整。

• 创建一个名为 test-driven-carousel 的新目录，并在 VS Code 中打开它：

  1$ mkdir test-driven-carousel/
  2$ code test-driven-carousel/

• 使用 VS Code 的“Git: 初始化仓库”命令，或在命令行中运行以下命令：

  1$ git init

• 仓库初始化完成后，添加上一章中的 .gitignore 文件：

  1//.gitignore
  2node_modules/
  3.vscode/

• 然后使用 npm 创建 package.json：

  1$ npm init -y

• 与前面几章一样，在 package.json 中添加 "private": true 项，以消除 npm 的各种警告：

1{
2  "name": "test-driven-carousel",
3  "private": true,
4  "version": "1.0.0",
5  "description": "",
6  "main": "index.js",
7  "scripts": {
8    "test": "echo \"Error: no test specified\" && exit 1"
9  },
10  "keywords": [],
11  "author": "",
12  "license": "ISC"
13}

在完成这两个核心文件的配置后，进行一次初始提交：

1:tada: 第一次提交

以上步骤应该都比较熟悉。接下来，我们将进入新领域，为一种称为 JSX 的语言添加支持。

用样板项目节省时间

在本课程中，我们从零开始搭建每个项目，以便你理解每个工具的作用以及如何按需修改。然而，如果你正在启动自己的新项目，并且不介意一些未知因素，可以尝试使用 React 的样板项目，比如 Facebook 官方的 create-react-app。它会自动处理配置工作，让你可以直接进入 React 代码编写阶段。