引入 Enzyme 并测试 React 组件

更新日期: 2019-11-12阅读: 2.3k标签: 测试

使用 Enzyme 库测试 react。这样可以使你的程序将更加可靠,并且更加容易避免回归。我们在这里用了 Jest,不过 Enzyme 也可以与 Mocha 和 Chai 之类的库一起使用。


Enzyme 基础

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

设置 Enzyme

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

npm install enzyme

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

你还可以找到 preact 和 inferno之类的库的适配器
npm install enzyme-adapter-react-16

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

setupTests.js
import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
 
configure({adapter: new Adapter()});

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

package.json
"jest": {
    "setupTestFrameworkScriptFile": "<rootDir>/app/setupTests.js"
}

准备就绪!


浅渲染

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

App.js
import React from 'react';
 
const App = () => {
  return <h1>Hello world!</h1>
}
 
export default App;
App.test.js
import React from 'react';
import { shallow } from 'enzyme';
import App from './App';
 
describe('app component', () => {
  it('contains a header with the "Hello world!"', () => {
    const app = shallow(<App/>);
    expect(app.containsMatchingElement(<h1>Hello world!</h1>)).toEqual(true);
  });
});

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

PASS  app/App.test.js
  app component
    ✓ contains a header with the "Hello world!"

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

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

ToDoList.js
import React from 'react';
 
const ToDoList = (props) => {
  return (
    <ul>
      {
        props.tasks.map((taskName, index) =>
          <li key={index}>{taskName}</li>
        )
      }
    </ul>
  )
};
 
export default ToDoList;

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

ToDoList.test.js
import React from 'react';
import { shallow } from 'enzyme';
import ToDoList from './ToDoList';
 
describe('ToDoList component', () => {
  describe('when provided with an empty array of tasks', () => {
    it('contains an empty <ul> element', () => {
      const toDoList = shallow(<ToDoList tasks={[]}/>);
      expect(toDoList).toContainReact(<ul/>);
    })
    it('does not contain any <li> elements', () => {
      const toDoList = shallow(<ToDoList tasks={[]}/>);
      expect(toDoList.find('li').length).toEqual(0);
    })
  });
 
  describe('when provided with an array of tasks', () => {
    it('contains a matching number of <li> elements', () => {
      const tasks = ['Wash the dishes', 'Make the bed'];
      const toDoList = shallow(<ToDoList tasks={tasks}/>);
      expect(toDoList.find('li').length).toEqual(tasks.length);
    })
  });
});

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

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

npm install jest-enzyme

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

setupTests.js
import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
import 'jest-enzyme';
 
configure({adapter: new Adapter()});

有关其提供的功能列表,请查看自述文件。你会发现它非常有用。

在第二个测试中,我们在组件上调用了 find 函数。这要归功于 shallow 函数返回 ShallowWrapper,它是渲染输出的包装器。它有一组可供调用的函数。要检查函数列表,请转到 Enzyme 文档

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

PASS  app/App.test.js
PASS  app/components/ToDoList/ToDoList.test.js
 
Test Suites: 2 passed, 2 total
Tests:       4 passed, 4 total
Snapshots:   0 total
Time:        1.41s
Ran all test suites.


总结

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

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

链接: https://www.fly63.com/article/detial/6456

测试工具比较:选Jest,不选Mocha

Jest的未来看起来非常令人激动!看到Jest推陈出新如此快速,我感觉它将很快成为整个React生态系统中大部分项目的首选工具。我建议,应该把测试迁移到Jest上去。

你需要了解的前端测试“金字塔”

如果您正在测试前端应用程序,则应该了解前端测试金字塔。在本文中,我们将看到前端测试金字塔是什么,以及如何使用它来创建全面的测试套件。

web网页性能测试工具都有哪些

作为前端开发,我们不仅需要满足产品需求功能的实现,同时也需要对自己做的网站进行安全、易用性、性能等方面的考虑。随着目前技术不断进步,web页面的性能测试工具也在不断完善,通过这些工具,我们可以客观的评价web网站的质量水平。

js单元测试工具-jest自动化测试

jest 是 facebook 开源的,用来进行单元测试的框架,可以测试 javascipt 和 react。jest 提供了非常方便的 API,可以对下面的场景方便的测试:一般函数、异步函数、测试的生命周期、react 测试

web测试要点、方法_web端测试大全总结

web测试大全,测试web网站有哪些点呢?主要包括:功能测试、兼容性测试、安全测试、输入框测试、用户权限测试等

前端性能测试工具整理简介_性能测试工具都有哪些?

前端性能测试工具都有哪些:Favicon、Open Graph、图片优化-压缩图像、CSS 优化-Autoprefixer、Purifycss、minify CSS、减少载入时间、GZIP、CDN、优化平台-Sentry、Google Tag Manager

不用写代码,也能做好接口测试

本文你将了解到:1、接口测试基本概念,包含什么是接口,什么是接口测试,为什么要做接口测试;2、接口测试用例设计,3、怎样不用写代码,也能快速的根据开发的API文档完成接口自动化测试脚本

Selenium打开浏览器加载慢的原因

在自动化元素定位操作中经常使用智能等待来加强定位的强壮性,主要就是因为WebDriver没有提供页面加载场景的方法;在使用JavaScript知识的突然心生灵感,可以使用JavaScript来配合验证页面加载,结果发现我真是井底之蛙。

power assert_更智能、优雅的全方位 assert 断言库

在写测试代码时,以往我们需要翻阅文档,学习各种 API 才能明白如何操作断言。而现在我们可以透过 power-assert 的 assert 方法来减轻调试压力。不仅如此,它还提供更加直观,具体的运行效果,帮助 DEBUG。写测试代码,其实可以很容易。

常用的web网站负载/压力/性能测试工具

在网站上线发布之前,我们除了必要的安全、功能测试外,往往还需要进行压力测试。通过模拟实际应用的软硬件环境及用户使用过程的系统负荷,长时间或超大负荷地运行测试软件。包括:Apache JMeter 、LoadRunner、NeoLoad等

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!