前端开发在开发完前端代码之后需要进行测试，以确保应用程序运行良好。在测试过程中，为了确保应用程序的质量和可靠性，需要进行多种测试，其中之一就是端到端测试（End-to-End Testing）。而使用 Chai 和 Supertest 进行 Express 应用程序测试是一种常用的端到端测试方法。本篇文章将介绍如何使用 Chai 和 Supertest 进行 Express 应用程序测试，并提供相关技巧和示例代码。
Chai 和 Supertest
Chai
Chai 是一个 JavaScript 断言库，用于编写端到端测试（End-to-End Testing）和单元测试（Unit Testing）。通过 Chai，开发者可以编写易于阅读和可维护的测试代码。
Supertest
Supertest 是一个基于 Superagent 的库，用于测试 Node.js HTTP 服务器和 Express 应用程序。通过 Supertest，可以模拟 HTTP 请求，并对应用程序的响应进行断言。
安装和配置 Chai 和 Supertest
在开始测试之前，首先需要安装和配置 Chai 和 Supertest。可以通过以下命令在项目中安装 Chai 和 Supertest：
npm install chai supertest --save-dev
安装完成后，在测试文件中添加以下代码引入 Chai 和 Supertest：
const chai = require('chai');
const expect = chai.expect;
const app = require('../app');
const request = require('supertest')(app);其中 chai 是 Chai 库，expect 是 Chai 的一个断言方法，app 是我们要进行测试的 Express 应用程序，request 是 Supertest 的一个方法，通过它我们可以发送请求和接收响应。
单元测试和端到端测试
在开始测试之前，需要对单元测试和端到端测试进行区分和了解。
单元测试
单元测试（Unit Testing）是对某一个功能的代码进行测试，目的是发现代码本身的缺陷而不是与其他部分的交互缺陷。
端到端测试
端到端测试（End-to-End Testing）是对整个应用程序进行测试，它将应用程序看成一个黑盒，测试其输入和输出是否满足预期。
在进行表单提交测试，比如登录测试时，我们需要进行端到端测试。
测试案例
我们将以一个登录页面为例，演示使用 Chai 和 Supertest 进行端到端测试的方法和技巧。
以下是我们的登录页面前端代码：
// javascriptcn.com 代码示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>登录页面</title>
</head>
<body>
<form id="login-form">
<label for="username">用户名：</label>
<input type="text" id="username" name="username" required><br><br>
<label for="password">密码：</label>
<input type="password" id="password" name="password" required><br><br>
<button type="submit">登录</button>
</form>
</body>
</html>以下是我们的 Express 应用程序代码：
// javascriptcn.com 代码示例
const express = require('express');
const bodyParser = require('body-parser');
const cookieParser = require('cookie-parser');
const app = express();
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());
app.get('/', function(req, res) {
res.sendFile(__dirname + '/index.html');
});
app.post('/login', function(req, res) {
const username = req.body.username;
const password = req.body.password;
if (username === 'admin' && password === '123') {
res.cookie('username', username);
res.redirect('/dashboard');
} else {
res.send('用户名或密码错误');
}
});
app.get('/dashboard', function(req, res) {
const username = req.cookies.username;
if (username) {
res.send(`欢迎回来，${username}`);
} else {
res.send('请登录');
}
});
module.exports = app;我们需要测试的是登录表单的提交功能，并验证登录成功后是否会重定向到 /dashboard 页面，如果登录失败则会在当前页面显示错误信息。
以下是我们的测试代码：
// javascriptcn.com 代码示例
describe('测试登录功能', function() {
it('登录成功', function(done) {
request.post('/login')
.type('form') // 表单提交需要加上这句
.send({
username: 'admin',
password: '123'
})
.expect(302) // 重定向到 /dashboard 页面
.end(function(err, res) {
if (err) return done(err);
expect(res.header['location']).to.equal('/dashboard');
done();
});
});
it('登录失败', function(done) {
request.post('/login')
.type('form') // 表单提交需要加上这句
.send({
username: 'admin',
password: '456'
})
.expect(200) // 页面显示错误信息
.end(function(err, res) {
if (err) return done(err);
expect(res.text).to.include('用户名或密码错误');
done();
});
});
});其中，我们使用了 describe 和 it 方法，对测试用例进行组织和管理。对于每个测试用例，我们使用了 request.post 方法，向 /login 提交表单，并发送数据 username: 'admin', password: '123'，然后使用 expect 方法对返回的响应进行断言。在结束测试时，使用 done 方法通知测试框架测试完成。
总结
本篇文章介绍了使用 Chai 和 Supertest 进行 Express 应用程序测试的方法和技巧，并提供了测试案例。通过学习本篇文章，读者可以了解并掌握使用 Chai 和 Supertest 进行端到端测试的方法，同时提高应用程序的质量和可靠性。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/653a58957d4982a6eb44ccfc