使用 Jest 和 Supertest 进行接口端点测试实例详解


Posted in Javascript onApril 25, 2020

本文实例讲述了使用 Jest 和 Supertest 进行接口端点测试。分享给大家供大家参考,具体如下:

如何创建测试是一件困难的事。网络上有许多关于测试的文章,却从来不告诉你他们是如何开始创建测试的。

所以,今天我将分享我在实际工作中是如何从头开始创建测试的。希望能够对你提供一些灵感。

目录:

  • 使用 Express 创建一个应用
  • 使用 Mongoose 链接 MongoDB
  • 使用 Jest 作为测试框架

为什么使用 Jest

  • 易于使用
  • wath-mode 非常棒

开始使用 Jest
首先,你需要安装它:

npm install jest --save-dev

接着,将测试启动脚本添加到package.json中:

"scripts": {
 "test": "jest",
 "test:watch": "jest --watch"
},

添加testtest:watch是非常有用的,前者是一次性测试,而后者开始了 watch 模式。

使用以下任意方法,Jest 就能识别哪些是测试文件:

    1. 位于 tests 文件夹下的所有 js 文件
    1. 文件名以 test.js 结尾的文件,譬如 user.test.js
    1. 文件名以 spec.js 结尾的文件,譬如 user.spec.js

你可以把它们放在任何位置。但我总是把测试文件和接口放在一起,这有利于维护管理。

- routes
 |- users/
  |- index.js
  |- users.test.js

编写你的第一个测试
Jest 包含了descibe,it,expect,你不必在每个测试文件内 require 它们。

  • describe 用来组织文件中的测试项
  • it 用来运行测试用例
  • expect 用于执行断言,当所有断言通过时,该测试才会通过

举一个测试失败的栗子。在该例中我 expect 1 应该严格等于 2。但由于 1 !== 2,所以测试失败。

it('Testing to see if Jest works', () => {
 expect(1).toBe(2)
})

如果运行测试,你会看到错误信息。

npm run test:watch

使用 Jest 和 Supertest 进行接口端点测试实例详解

更改测试用例使得测试通过:

it('Testing to see if Jest works', () => {
 expect(1).toBe(1)
})

使用 Jest 和 Supertest 进行接口端点测试实例详解

虽然已经包含了使用 Jest 进行测试的大部分内容,但却没啥卵用,因为实际工作中的测试比这复杂多了。

异步测试
你需要发送请求来测试接口。请求是异步的,这意味着你必须能够编写异步测试用例。

使用 Jest 编写异步测试非常容易,仅仅需要两步:

    1. 添加 async 关键字
    1. 在测试的最后一步,调用 done

就像这样:

it('Async test', async done => {
 // 其他逻辑
 
 done()
})

测试接口
可以选择 Supertest 来测试接口。我们先安装 Supertest。

npm install supertest --save-dev

在测试接口之前,需要设置下 server,以便 Supertest 在测试中使用它。

大多数教程都告诉你,在 server 文件中监听 Express 应用端口,像这样:

const express = require('express')
const app = express()

// Middlewares...
// Routes...

app.listen(3000)

这有个潜在问题,当你编写了多个测试文件,运行测试时,会产生"port in use"的错误。

如果想要在每个测试文件都启动一个新的服务,你需要导出一个没有监听端口的 app。

const express = require('express')
const app = express()

// Middlewares...
// Routes...

module.exports = app

为了使应用正常工作,需要在另一个文件(比如 start.js)内监听 app.

// start.js
const app = require('./server.js)
app.listen(3000)

使用 Supertest
在测试文件内导入 app 和 supertest 来测试接口。

const app = require('./server') // Link to your server file
const supertest = require('supertest')
const request = supertest(app)

现在,你可以在测试文件中发送 GET,POST,PUT,PATCH 和 DELETE 请求了。在发送请求之前我们需要一个接口(端点)。譬如我们的应用有一个 /test 接口,它返回一个 JSON。

app.get('/test', async (req, res) => {
 res.json({message: 'pass!'})
})

使用 Supertest 的 .get 方法,向 /test 发送一个 GET 请求:

it('Gets the test endpoint', async done => {
 // 发送 GET 请求到应用的 /test 接口
 const res = request.get('/test')

 // ...
 done()
})

Supertest 从接口处获取响应结果。你可以测试 HTTP 状态码和响应体:

it('gets the test endpoint', async done => {
 const response = await request.get('/test')

 expect(response.status).toBe(200)
 expect(response.body.message).toBe('pass!')
 done()
})

使用 Jest 和 Supertest 进行接口端点测试实例详解

接下来,我会向你展示如何发送 POST 请求,怎样在测试文件内连接 Mongoose。

译自:https://zellwk.com/blog/endpoint-testing/?ck_subscriber_id=313113699

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

更多关于JavaScript相关内容可查看本站专题:《JavaScript常用函数技巧汇总》、《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
js资料prototype 属性
Mar 13 Javascript
使用jquery实现以post打开新窗口
Mar 19 Javascript
JavaScript判断前缀、后缀是否是空格的方法
Apr 15 Javascript
纯CSS3代码实现滑动开关效果
Aug 19 Javascript
JS组件系列之Bootstrap table表格组件神器【二、父子表和行列调序】
May 10 Javascript
几种响应式文字详解
May 19 Javascript
layui表格checkbox选择全选样式及功能的实例
Mar 07 Javascript
小程序分享模块超级详解(推荐)
Apr 10 Javascript
Layui事件监听的实现(表单和数据表格)
Oct 17 Javascript
开发Node CLI构建微信小程序脚手架的示例
Mar 27 Javascript
vue组件讲解(is属性的用法)模板标签替换操作
Sep 04 Javascript
vue watch监控对象的简单方法示例
Jan 07 Vue.js
javascript 函数的暂停和恢复实例详解
Apr 25 #Javascript
详解ES6 CLASS在微信小程序中的应用实例
Apr 24 #Javascript
Vue中函数防抖节流的理解及应用实现
Apr 24 #Javascript
vue 路由懒加载中给 Webpack Chunks 命名的方法
Apr 24 #Javascript
vue中使用带隐藏文本信息的图片、图片水印的方法
Apr 24 #Javascript
基于Vue实现微前端的示例代码
Apr 24 #Javascript
Vue通过getAction的finally来最大程度避免影响主数据呈现问题
Apr 24 #Javascript
You might like
php转换颜色为其反色的方法
2015/04/27 PHP
PHP定义字符串的四种方式详解
2018/02/06 PHP
jquery自定义属性(类型/属性值)
2013/05/21 Javascript
js购物车实现思路及代码(个人感觉不错)
2013/12/23 Javascript
jquery动态分页效果堪比时光网
2014/09/25 Javascript
JavaScript设计模式之适配器模式介绍
2014/12/28 Javascript
IE中document.createElement的iframe无法设置属性name的解决方法
2015/09/14 Javascript
详解JavaScript对象序列化
2016/01/19 Javascript
AngularJS控制器之间的数据共享及通信详解
2016/08/01 Javascript
BootStrap中按钮点击后被禁用按钮的最佳实现方法
2016/09/23 Javascript
原生js实现键盘控制div移动且解决停顿问题
2016/12/05 Javascript
使用Bootstrap美化按钮实例代码(demo)
2017/02/03 Javascript
微信小程序上传图片到服务器实例代码
2017/11/07 Javascript
关于vue中 $emit的用法详解
2018/04/12 Javascript
vue element中axios下载文件(后端Python)
2019/05/10 Javascript
基于jQuery拖拽事件的封装
2020/11/29 jQuery
[01:01:13]2018DOTA2亚洲邀请赛 4.5 淘汰赛 Mineski vs VG 第三场
2018/04/06 DOTA
[49:35]LGD vs OG 2018国际邀请赛淘汰赛BO3 第二场 8.25
2018/08/29 DOTA
Python 常用 PEP8 编码规范详解
2017/01/22 Python
在unittest中使用 logging 模块记录测试数据的方法
2018/11/30 Python
pandas 如何分割字符的实现方法
2019/07/29 Python
Python中顺序表原理与实现方法详解
2019/12/03 Python
PyQT5 emit 和 connect的用法详解
2019/12/13 Python
如何使用Python抓取网页tag操作
2020/02/14 Python
python读写文件write和flush的实现方式
2020/02/21 Python
可视化pytorch 模型中不同BN层的running mean曲线实例
2020/06/24 Python
Python如何将将模块分割成多个文件
2020/08/04 Python
世界上最大的在线旅行社新加坡网站:Expedia新加坡
2016/08/25 全球购物
美国杰西潘尼官网:JCPenney
2019/06/12 全球购物
Conforama瑞士:家具、厨房、电器、装饰
2020/09/06 全球购物
网络工程师专家职业发展路线
2014/02/14 职场文书
新春文艺演出主持词
2014/03/27 职场文书
大学班级文化建设方案
2014/05/06 职场文书
甜品店创业计划书
2014/09/21 职场文书
教你怎么用Python处理excel实现自动化办公
2021/04/30 Python
MySQL 数据恢复的多种方法汇总
2021/06/21 MySQL