使用 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 相关文章推荐
基于jquery实现的上传图片及图片大小验证、图片预览效果代码
Apr 12 Javascript
深入理解JavaScript 闭包究竟是什么
Apr 12 Javascript
js有序数组的连接问题
Oct 01 Javascript
Javascript浮点数乘积运算出现多位小数的解决方法
Feb 17 Javascript
jquery 实现两Select 标签项互调示例代码
Sep 25 Javascript
jQuery实现列表的全选功能
Mar 18 Javascript
JS+CSS实现另类带提示效果的竖向导航菜单
Oct 15 Javascript
Bootstrap~多级导航(级联导航)的实现效果【附代码】
Mar 08 Javascript
JCrop+ajaxUpload 图像切割上传的实例代码
Jul 20 Javascript
使用Bootrap和Vue实现仿百度搜索功能
Oct 26 Javascript
小程序开发踩坑:页面窗口定位(相对于浏览器定位)(推荐)
Apr 25 Javascript
java和js实现的洗牌小程序
Sep 30 Javascript
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
Yii查询生成器(Query Builder)用法实例教程
2014/09/04 PHP
PHP互换两个变量值的方法(不用第三变量)
2016/11/14 PHP
jquery.messager.js插件导致页面抖动的解决方法
2013/07/14 Javascript
JS数组array元素的添加和删除方法代码实例
2015/06/01 Javascript
在WordPress中加入Google搜索功能的简单步骤讲解
2016/01/04 Javascript
浅析JavaScript作用域链、执行上下文与闭包
2016/02/01 Javascript
JQuery和PHP结合实现动态进度条上传显示
2016/11/23 Javascript
Bootstrap框架实现广告轮播效果
2016/11/28 Javascript
jquery实现轮播图效果
2017/02/13 Javascript
jQuery实现Table表格隔行变色及高亮显示当前选择行效果示例
2017/02/14 Javascript
关于js中的鼠标事件总结
2017/07/11 Javascript
关于javascript sort()排序你可能忽略的一点理解
2017/07/18 Javascript
vue 2.0封装model组件的方法
2017/08/03 Javascript
JS库之ParticlesJS使用简介
2017/09/12 Javascript
基于openlayers4实现点的扩散效果
2020/08/17 Javascript
iphone刘海屏页面适配方法
2019/05/07 Javascript
浅析vue-cli3配置webpack-bundle-analyzer插件【推荐】
2019/10/23 Javascript
jQuery实现滑动星星评分效果(每日分享)
2019/11/13 jQuery
Python break语句详解
2014/03/11 Python
Python中AND、OR的一个使用小技巧
2015/02/18 Python
Python爬虫小技巧之伪造随机的User-Agent
2018/09/13 Python
django orm 通过related_name反向查询的方法
2018/12/15 Python
详解Ubuntu16.04安装Python3.7及其pip3并切换为默认版本
2019/02/25 Python
利用Python+阿里云实现DDNS动态域名解析的方法
2019/04/01 Python
Pandas库之DataFrame使用的学习笔记
2019/06/21 Python
django中使用POST方法获取POST数据
2019/08/20 Python
原生python实现knn分类算法
2019/10/24 Python
python实现梯度下降法
2020/03/24 Python
CHARLES & KEITH英国官网:新加坡时尚品牌
2018/07/04 全球购物
青春飞扬演讲稿
2014/09/11 职场文书
奥巴马经典演讲稿
2014/09/13 职场文书
催款函怎么写
2015/06/24 职场文书
《鲁班学艺》读后感3篇
2019/11/27 职场文书
redis实现排行榜功能
2021/05/24 Redis
详解Oracle数据库中自带的所有表结构(sql代码)
2021/11/20 Oracle
Windows Server 2022 超融合部署(图文教程)
2022/06/25 Servers