使用 Chai 和 Supertest 进行 API 测试时遇到的错误堆栈不清晰解决方法-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，进行 API 测试是非常重要的一环。Chai 和 Supertest 是两个流行的 Node.js 测试工具，它们可以帮助开发者进行 API 接口测试，并且提供了丰富的断言和测试组件。

然而，很多开发者在使用 Chai 和 Supertest 进行 API 测试时会遇到类似错误堆栈不清晰的情况，从而导致难以找出问题并解决。本文将介绍使用 Chai 和 Supertest 进行 API 测试时遇到错误堆栈不清晰的原因，以及如何解决这些问题。

问题描述

使用 Chai 和 Supertest 进行 API 测试时，如果出现错误，有时会在终端或控制台输出错误信息。例如，我们发送了一个请求，但接口返回了错误状态码，此时会输出如下信息：

1) Test API calls
     GET /api/v1/users
       returns 404 for non-exsitent routes:
     AssertionError: expected 200 to equal 404
      at /path/to/test.js:16:18

很明显，这是一段错误信息，但我们需要了解更多关于这个问题的细节，以帮助我们找到并解决问题。然而，这个错误堆栈没有提供足够的信息，从而导致我们难以找到问题的根本原因。

原因分析

上面的错误信息没有提供足够的信息是因为测试框架和 Node.js 的运作方式。当 Chai 和 Supertest 运行 API 测试时，它们会生成一个随机端口，并启动一个 Express 服务。测试脚本会向这个服务发送请求，并断言响应是否符合预期。

Node.js 的堆栈跟踪机制会捕捉异常并将它们记录在控制台或终端输出中。由于异常是在测试框架和 Express 服务之间抛出的，因此在堆栈跟踪过程中，我们看到的信息可能很少，难以看出实际的问题。

解决方案

为了解决这个问题，我们可以使用调试工具——Visual Studio Code。VS Code 是一个流行的开发工具，它提供了强大的调试工具和堆栈跟踪功能。通过使用 VS Code，我们可以更方便地查看错误信息和堆栈跟踪。

下面给出一个使用 Chai 和 Supertest 进行 API 测试时的示例代码，来演示如何使用 VS Code 进行 API 测试调试。

// javascriptcn.com 代码示例
const app = require('../app');
const chai = require('chai');
const chaiHttp = require('chai-http');

chai.use(chaiHttp);

describe('API Test', () => {
  it('should return 200', (done) => {
    chai.request(app)
      .get('/api/v1/users')
      .end((err, res) => {
        if(err) {
          throw err;
        }
        chai.expect(res).to.have.status(200);
        done();
      });
  });
});

上面的代码可以看出，我们使用了 chai-http 库来发送请求。在测试代码中，我们可以象征性地增加一个断言 expect(res).to.have.status(200)，表示我们期望响应返回状态码为 200。如果响应状态码不是 200，则会引发一个异常。

现在我们将在 VS Code 中使用断点和调试工具来调试上面的代码。

首先，我们需要在 VS Code 中打开我们的测试代码文件。然后，我们需要安装 VS Code 中的 Chrome 调试插件。安装完成后，我们在 launch.json 文件中增加一个配置，以便于我们进行调试。

// javascriptcn.com 代码示例
{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Node.js",
      "type": "node",
      "request": "launch",
      "program": "${workspaceFolder}/node_modules/mocha/bin/_mocha",
      "args": [
        "-u",
        "exports",
        "--timeout",
        "999999",
        "--colors",
        "${workspaceFolder}/test/**/*.test.js"
      ],
      "console": "integratedTerminal",
      "internalConsoleOptions": "neverOpen",
      "skipFiles": [
        "<node_internals>/**"
      ]
    },
    {
      "type": "chrome",
      "request": "attach",
      "name": "Attach to Chrome",
      "port": 9222,
      "webRoot": "${workspaceFolder}",
      "url": "http://localhost:${port}/login",
      "timeout": 30000
    }
  ]
}

上面的配置文件中，我们添加了一个 Chrome 调试配置。这个配置允许我们通过在 Chrome 中运行脚本来调试测试代码。

接着，我们需要运行 npm test 命令，此时 VS Code 将会在终端中启动测试，并在 Chrome 浏览器中打开我们的调试页面。在页面上，我们可以看到各种变量的值和断点位置等等。

如下图所示，在我们运行调试之前，页面上的所有断点都是灰色，当代码的执行流程到达断点处时，会触发断点并将断点变为红色：

现在我们可以进行调试了。如果断点从灰色变为红色，那么我们可以查看代码中的变量来判断是否有问题。一旦我们找到了问题，就可以根据错误信息进行解决。

总结

在本文中，我们讨论了使用 Chai 和 Supertest 进行 API 测试时遇到的错误堆栈不清晰的情况。经过分析后，我们了解了这个问题的根源，并学习了一种解决方法，即使用 VS Code 进行调试。

在实际项目中，我们需要注意测试代码的质量和完整性，尽可能覆盖所有边角情况，并提高测试代码的可读性。同时，我们还需要针对性地使用工具来解决我们在测试过程中所遇到的问题，以便于更快地进行调试和开发。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/653114be7d4982a6eb2b093c