Supertest Jest 使用 Jest 和 Supertest 测试 NodeJs/Express API

2025-05-25

Supertest Jest使用 Jest 和 Supertest 测试 NodeJs/Express API

这是使用 Express、Sequelize 和 Postgres 构建 API的第三部分。在第二部分中,我们构建了简单的 API 端点来演示 Sequelize 中的 CRUD 操作。在本文中,我们将重点介绍如何为第二部分中创建的 API 端点编写端到端测试。

术语解释

  • 端到端测试——一种测试应用程序从开始到结束的流程是否按预期运行的测试类型。这也称为功能测试。此类测试的一个例子是测试端点或路由,这涉及测试端点工作所需的一切,例如数据库连接、依赖项等。

  • 测试运行器- 一个库或工具,它在给定的目录或文件中获取源代码(测试),执行测试并将结果写入控制台或任何指定位置,例如 Jest、Mocha。

  • Jest - Jest是 Facebook 开发的 JavaScript 测试框架。它开箱即用,配置极少,并内置测试运行器、断言库和模拟支持。

  • Supertest - 一个用于测试 Node.js HTTP 服务器的库。它使我们能够以编程方式向 HTTP 服务器发送 HTTP 请求(例如 GET、POST、PATCH、PUT、DELETE)并获取结果。

现在我们已经解释了基本术语,让我们深入了解主要业务。
如果您一直在关注之前的文章,那么请使用您喜欢的文本编辑器打开它,否则请克隆此处使用的存储库

第 1 步 - 安装 Jest 和 supertest

打开终端并cd进入项目根目录并运行以下命令:



npm install --save-dev jest supertest


Enter fullscreen mode Exit fullscreen mode

第 2 步 - 配置 Jest

打开package.json并向其中添加下面的代码。



 "jest": {
    "testEnvironment": "node",
    "coveragePathIgnorePatterns": [
      "/node_modules/"
    ]
  },


Enter fullscreen mode Exit fullscreen mode

这是我们测试 API 所需的 Jest Set 基本配置。任何想要jest忽略的文件都放在"coveragePathIgnorePatterns".中"coveragePathIgnorePatterns",指定一个与要排除的目录匹配的正则表达式,在本例中,我们希望它忽略node_modules目录。

接下来我们添加test脚本。在scripts部分中package.json,添加以下脚本:



"test": "jest"


Enter fullscreen mode Exit fullscreen mode

步骤 3 - 测试 Jest 配置

现在,让我们确认jest一切已设置完毕,可以运行测试了。在终端运行npm test。你会注意到控制台上打印了如下所示的错误,这表明jest设置已完成。

当未指定测试时,Jest 出现错误

让我们添加一个简单的测试来验证配置。创建一个名为 的新目录tests,并添加一个新文件sample.test.js。在 目录下sample.test.js,添加以下代码:



describe('Sample Test', () => {
  it('should test that true === true', () => {
    expect(true).toBe(true)
  })
})


Enter fullscreen mode Exit fullscreen mode

现在,运行npm test,您将获得如下所示的输出:
示例测试输出

Jest 如何识别测试文件?

Jest 通过三种方式识别测试文件:

  • 具有扩展名的文件.test.js
  • 具有扩展名的文件.spec.js
  • __tests__文件夹或目录内的所有文件。

测试 API 端点

现在我们已经设置好了测试环境,是时候开始测试 API 端点了。由于我们的端点需要向数据库发出请求,因此我们需要设置一个测试数据库。设置测试数据库的原因是,每次运行测试时,我们都会删除该数据库。每次运行测试时删除数据库可以确保测试的完整性。也就是说,如果测试是post在数据库中创建记录,那么我们需要确保在测试运行之前数据库中没有任何post记录,这样才能确保测试结果的准确性。

步骤 4 - 创建测试数据库
在本文的第一部分中,我们创建了两个数据库,一个用于开发,另一个用于测试。如果您还没有创建测试数据库,请点击链接创建一个。

步骤 5 - 配置测试脚本

我们需要以下脚本:

  • pretest- 这pretest是一个 npm 脚本,在npm test命令执行时会自动调用。我们将钩入该命令,以在每次测试运行前更改测试环境并刷新数据库。

  • migrate:reset:此命令将负责在每次测试运行之前刷新数据库。

现在编辑如下scripts所示package.json



"scripts": {
    "start-dev": "nodemon index.js",
    "migrate": "npx sequelize-cli db:migrate",
    "migrate:reset": "npx sequelize-cli db:migrate:undo:all && npm run migrate",
     "test": "cross-env NODE_ENV=test jest --testTimeout=10000",
    "pretest": "cross-env NODE_ENV=test npm run migrate:reset"
  }


Enter fullscreen mode Exit fullscreen mode

脚本修改中需要注意的事项:

  • cross-env- 一个与操作系统无关的软件包,用于设置环境变量。我们用它来设置环境变量,NODE_ENV以便test我们的测试可以使用测试数据库。运行以下命令安装 cross-env。


npm i -D cross-env


Enter fullscreen mode Exit fullscreen mode
  • --testTimeout标志 - 这会增加 Jest 的默认超时时间,即 5000 毫秒。这很重要,因为测试运行器需要在运行测试之前刷新数据库。

步骤 6 - 测试脚本



npm test


Enter fullscreen mode Exit fullscreen mode

如果一切正常,您应该在终端上看到以下输出:

替代文本
仔细观察上面的屏幕截图,您会注意到一行using environment "test"显示cross-env已经改变了NODE_ENV

最后一步——测试路线/端点

现在,让我们开始为端点编写测试。在 tests 目录中创建一个名为 routes.test.js 的文件。



touch tests/routes.test.js


Enter fullscreen mode Exit fullscreen mode
  • 测试创建帖子端点

将以下代码复制到tests/routes.test.js



const request = require('supertest')
const app = require('../server')
describe('Post Endpoints', () => {
  it('should create a new post', async () => {
    const res = await request(app)
      .post('/api/posts')
      .send({
        userId: 1,
        title: 'test is cool',
      })
    expect(res.statusCode).toEqual(201)
    expect(res.body).toHaveProperty('post')
  })
})


Enter fullscreen mode Exit fullscreen mode
  • describe函数用于将相关测试分组
  • 这是运行实际测试的函数it的别名。test
  • expect函数使用一组matcher函数测试一个值。

访问Jest 文档以获取 jest 函数的完整列表和详细信息。

现在,运行测试



npm test


Enter fullscreen mode Exit fullscreen mode

输出如下所示:

替代文本

有关所有端点测试的完整代码,请检查存储库

结论

我们已经完成了编写与数据库交互的 API 端点测试的流程。在本文的最后一部分,我将介绍如何将 CI/CD 和代码覆盖率工具集成到测试环境中。敬请期待。

如果您有任何疑问或建议,欢迎随时联系我,帮助我改进文章。您也可以在下方评论区分享您的想法。谢谢!

本文最初发表在我的博客上

文章来源:https://dev.to/nedsoft/testing-nodejs-express-api-with-jest-and-supertest-1km6
PREV
使用 HTML 和 CSS 实现 Android 徽标 Android-Logo
NEXT
Express 中的中央错误处理