javascript教程_JavaScript测试教程part 2：引入 Enzyme 并测试 React 组件[每日前端夜话0xE8]...

每日前端夜话0xE8

每日前端夜话，陪你聊前端。

每天晚上18:00准时推送。

正文共：1319 字

预计阅读时间：6 分钟

作者：Marcin Wanago

翻译：疯狂的技术宅

来源：wanago.io

• 1. JavaScript测试教程-part 1：用 Jest 进行单元测试

• 2. JavaScript测试教程–part 2：引入 Enzyme 并测试 React 组件

• 3. JavaScript测试教程–part 3：测试 props，挂载函数和快照测试

• 4. JavaScript测试教程–part 4：模拟 API 调用和模拟 React 组件交互

在本教程的第一篇中，我们简要介绍了单元测试的基础。这次要更进一步，使用 Enzyme 库测试 React。这样可以使你的程序将更加可靠，并且更加容易避免回归。我们在这里用了 Jest，不过 Enzyme 也可以与 Mocha 和 Chai 之类的库一起使用。

Enzyme 基础

Enzyme 是一个库，用于在测试时处理你的 React 组件。它由 Airbnb 开发。

设置 Enzyme

继续上一篇文章的内容，假设你 Jest 已经能够工作了。如果还没有，请随时查看课程的上一部分。下面开始安装 Enzyme

1npm install enzyme

首先要创建一个 setupTests.js 文件。它将包含 adapter 的用法，后者是一个附加库，允许你将 Enzyme 与一组特定的 React 版本一起使用。我将使用 React 16.x，所以需要安装 enzyme-adapter-react-16。有关兼容性列表，请查看 Enzyme repo【https://github.com/airbnb/enzyme】。

你还可以找到 preact 和 inferno之类的库的适配器

1npm install enzyme-adapter-react-16

完成之后，setupTests.js 文件的内容应如下所示：

setupTests.js

1

最后要做的是在 package.json 中提供此文件的路径

package.json

1

准备就绪！

浅渲染

Enzyme 库的最基本用法是浅渲染。它允许你仅渲染父组件。“浅渲染”不但速度更快，而且非常适合单元测试。这样，你就不比测试传递给 shallow 函数的其他组件。

App.js

1

App.test.js

 1

在这个简单测试中，我们正在检查 App 组件是否包含某个标头。运行 npm run test 后，你会看到一条成功消息。

1PASS  app/App.test.js

这里要注意一个非常重要的点：即使我们用了 Enzyme，但测试运行程序仍然是 Jest。由于我们用的是 expect 函数，因此可以使用各种可供调用的匹配器函数。我已经在课程的第一部分中提到了它们。相关列表，请访问 Jest 文档【https://jestjs.io/docs/zh/expect】。

让我们创建一些更有趣的测试。先创建一个全新的组件。

ToDoList.js

 1

让我们测试一下，如果提供的任务列表为空，将会发生什么，如果包含任务，又会发生什么。

ToDoList.test.js

 1

测试顺利通过，但是我们应该解释一些内容。

在第一个测试中，我们使用了 toContainReact 函数，这是一个自定义匹配器函数。它是 enzyme-matchers 库的一部分。要将其与 Jest 一起使用，请安装 jest-enzyme 包。

1npm install jest-enzyme

最后要做的是将其导入 setupTests 文件中。

setupTests.js

1

有关其提供的功能列表，请查看自述文件【https://github.com/FormidableLabs/enzyme-matchers】。你会发现它非常有用。

在第二个测试中，我们在组件上调用了 find 函数。这要归功于 shallow 函数返回 ShallowWrapper，它是渲染输出的包装器。它有一组可供调用的函数。要检查函数列表，请转到 Enzyme 文档【https://github.com/airbnb/enzyme/blob/master/docs/api/shallow.md】。

运行所有的测试会给我们带来成功的信息！

1PASS  app/App.test.js

总结

本文中我们已经了解了使用 Enzyme 测试 React 组件的基本知识。我们已经介绍了安装 Enzyme 并运行第一个简单测试。使用的渲染类型称为“浅渲染”。之所以这样称呼，是因为它不渲染任何子组件。在编写单元测试时，它工作得很好。在本教程的后续部分中，我将介绍其他类型的渲染，并学习如何测试程序的不同部分。它将包括快照测试和模拟数据之类的技术。下次见！

原文：https://wanago.io/2018/09/03/javascript-testing-tutorial-part-two-introducing-enzyme-and-testing-react-components/

 

下面夹杂一些私货：也许你和高薪之间只差这一张图

2019年京程一灯课程体系上新，这是我们第一次将全部课程列表对外开放。

愿你有个好前程，愿你月薪30K。我们是认真的 ！

在公众号内回复“体系”查看高清大图

长按二维码，加大鹏老师微信好友

拉你加入前端技术交流群

唠一唠怎样才能拿高薪

 往期精选 

• BootstrapVue 入门

• JavaScript的工作原理：引擎、运行时和调用堆栈

• 用 TypeScript 开发 Node.js 程序

• 快速上手最新的 Vue CLI 3

• JavaScript 程序员可以从C ++中学到些什么

• 在同一基准下对前端框架进行比较

• Edge 拥抱 Chromium 对前端工程师意味着什么？

• 使你的 JavaScript 代码简单易读

• Node.js多线程完全指南

• deno如何偿还Node.js的十大技术债

• 实战！半小时写一个脑力小游戏

• CSS Flexbox 可视化手册

• 世界顶级公司的前端面试都问些什么

• V8引擎内部机制及优化代码的5个技巧

小手一抖，资料全有。长按二维码关注前端先锋，阅读更多技术文章和业界动态。