前言
前端开发是一个快速发展的行业，技术变化非常快。为了更好地开发和测试代码，我们需要一些非常好的工具。Lookout-chai-enzyme 是一个非常好的工具，它能够帮助我们更好地测试我们的 React 组件。
什么是 Lookout-chai-enzyme
Lookout-chai-enzyme 是一个轻量级的测试工具，它结合了 Chai（一个测试框架）和 Enzyme（一个 React UI 测试工具）。
Chai 是一个 BDD/TDD 断言库，它能够帮助我们编写测试代码，并检测我们的代码是否符合我们的预期。
Enzyme 是一个 React UI 测试工具，它为我们提供了一系列 API，帮助我们快速、简便地测试我们的 React 组件。
安装
安装 Lookout-chai-enzyme 非常简单。在你的项目目录下，打开命令行终端，并执行以下命令：
npm install lookout-chai-enzyme --save-dev
上面这个命令会下载并安装 Lookout-chai-enzyme，以及它的依赖项，并将它们保存到 node_modules 目录下。
使用
使用 Lookout-chai-enzyme 也非常简单。在编写测试代码时，我们只需要按照以下步骤操作：
步骤 1：导入库
我们首先要从 lookout-chai-enzyme 中导入所需的库。在你的测试代码文件的顶部加入以下代码行：
import chai from 'chai'; import chaiEnzyme from 'lookout-chai-enzyme'; import Enzyme from 'enzyme'; import Adapter from 'enzyme-adapter-react-16';
上面这些代码行首先从 chai 库中导入 chai 对象，接着从 lookout-chai-enzyme 库中导入 chaiEnzyme 对象，从 Enzyme 库中导入 Enzyme 对象，最后从 enzyme-adapter-react-16 库中导入 Adapter 对象。
步骤 2：配置 Enzyme
我们接下来需要配置 Enzyme。在你的测试代码文件的顶部加入以下代码行：
Enzyme.configure({adapter: new Adapter()});上面这行代码将 Adapter 对象传入了 Enzyme.configure() 方法中，从而配置了 Enzyme。
步骤 3：在 chai 中使用 lookout-chai-enzyme
我们最后需要在 chai 中使用 lookout-chai-enzyme。在你的测试代码文件的顶部加入以下代码行：
chai.use(chaiEnzyme());
上面这行代码会将 chaiEnzyme 对象传入了 chai.use() 方法中，在 chai 中启用了 lookout-chai-enzyme。
步骤 4：编写测试代码
我们现在就可以编写测试代码了。假设我们要测试一个名为 MyComponent 的 React 组件，该组件呈现出“Hello World！”这样的文本。我们可以编写以下测试代码：
-- -------------------- ---- -------
------ ------- ---- ---------
------ ----------- ---- -----------------
---------------------- ---- -- -- -
---------- ------ ------ --------- -- -- -
----- ------- - ------------------ ----
------------------------------------------------- ---------
---
---上面这个测试代码的第一行首先使用了 Enzyme 库中的 mount() 方法来渲染 MyComponent 组件。这里的 mount() 方法是用于测试 React 组件的其它方法之一。
第二行使用了 expect() 函数和 chai 库中的 to.equal() 方法来检查组件呈现的文本是否与“Hello World！”相同。由于我们在第 3 步中启用了 lookout-chai-enzyme，这里的 to.equal() 方法会使用 lookout-chai-enzyme 中的语法糖，使我们的测试代码更容易编写和理解。
总结
Lookout-chai-enzyme 是一个非常好的工具，它可以帮助我们更好地测试我们的 React 组件。在使用过程中，我们需要按照一定的步骤操作，才能启用它的每一个功能。最后，我们需要仔细编写测试代码，以确保我们的组件在各种情况下都能得到正确的测试结果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60058a5f81e8991b448ed383