引入 Enzyme 并测试 React 组件

时间: 2019-11-12阅读: 221标签: 测试

使用 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/

吐血推荐

1.站长广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入...

2.休闲娱乐: 直播/交友    优惠券领取   网页游戏   H5游戏

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

Js测试框架

Jest是Facebook团队构建和维护的JavaScript测试框架,基于Jasmine的JavaScript单元测试框架。Jest在2018年接受度非常高,今年在JavaScript社区更是如此,根据Github的数据,目前超过150万个项目在使用Jest

开发中的测试名词解释

Alpha测试是由用户在开发环境下进行的测试,也可以是开发机构内部的用户在模拟实际操作环境下进行的测试,测试环境受开发方控制,用户数量相对较少

Jest单元测试框架

在命令行工具中输入以下命令,初始化前端项目并生成package.json:babel-jest、 babel-core、 regenerator-runtime、babel-preset-env这几个依赖是为了让我们可以使用ES6的语法特性进行单元测试

API测试工具

越来越多的公司正在向DevOps的方向左转,以实现持续集成和持续部署开发。这意味着我们的反馈需要比以往更快,以便确定我们的应用程序是否准备好交付。这就是API测试如此重要的原因

Appium介绍

appium是一个自动化测试开源工具,支持IOS、Android平台上的原生应用、web应用和混合应用;原生应用:是指使用ios或者android编写的应用,Appium是Node.js写的http服务器,用来创建和控制webDriver的session。

Vuex 之单元测试[译]

通常来说 Vue 组件会在以下方面和 Vuex 发生交互:commit 一个 mutation、dispatch 一个 action、通过 $store.state 或 getters 访问 state

10 款最佳移动 App 安全测试工具

移动互联网时代,我们的生活和工作深受 App 影响。伴随移动 App 的广泛应用,App 安全日益重要。本文介绍了 App 开发所需的安全测试工具。TOP 10 移动 App 安全测试工具列表

Node.JS如何按顺序调用async函数,如何判断是否为async函数,在mocha中自动化测试async/await代码

在Node.JS中,如果你即不喜欢回调代码嵌套,也不喜欢promise的链式写法,可以使用async/await将程序改造成顺序执行的。async/await本质上也是由Promise实现的,具体原理可在网上搜索,那么调用时和普通函数调用有何不同?

原生js逻辑测试题及答案

屏幕打印2000到3000之间的所有的数。求450到550之间所有奇数的和。找出200以内,既能整除3又能整除5的所有数。页面弹出输入框,只有当用户输入Alice和Bob这两个名字时,才会向用户问好“你好”。

神奇的 Promise: 一次异步代码的单元测试

本文适用环境为 NodeJs v12 和 2019 年 11 月 19 日最新版 Chrome。写这篇文章的起因是在写单元测试时,做形如下测试时无法使用 await 将测试代码恰好阻塞到 catch 在 Event Loop 中被调用后的时机

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

文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全