WebStorm 2025.2 Help

测试 Node.js

使用 WebStorm,您可以使用多个框架测试 Node.js 应用程序。

当前页面介绍使用 内置 Node.js 测试运行器Mocha进行测试,Mocha 是一个 JavaScript 测试框架,特别适合执行异步测试场景。 您可以通过 WebStorm 外部运行 Mocha 测试,查看以树状视图排列的测试结果,并轻松导航到测试源码。 测试旁边,在编辑器中,WebStorm 显示测试状态,并提供快速运行或调试的选项。

准备工作

  1. 请确保您的计算机上已安装 Node.js

  2. 请确保在设置中启用了 Node.js 插件。 按 Ctrl+Alt+S 打开设置,然后选择 插件。 点击 已安装 选项卡。 在搜索字段中输入 Node.js。 如需了解插件的更多信息,请参见 管理插件

内置 Node.js 测试运行器

从第 20 版开始,Node.js 提供稳定版本的 内置 Node.js 测试运行器。 WebStorm 支持与内置测试运行器集成,因此您无需安装和配置任何第三方框架即可运行测试。

也支持测试 TypeScript 代码,详情请参见 测试 TypeScript

  1. 请确保您的计算机上已安装 Node.js 20 或更高版本,并将其配置为 本地 Node.js 解释器

  2. 按照 Node.js 官方网站上的说明创建测试文件。

  3. 在边距中:

    • 点击 运行测试图标 以运行单个测试。

    • 点击 运行全部测试图标 以运行某个测试套件中的所有测试。

    使用 Node.js 内置测试运行器从编辑器运行测试
  4. 运行 工具窗口中查看测试结果,详见 探索测试结果

  5. 重新运行测试:

    • 若要重新运行单个测试,请在 运行 工具窗口中选择该测试,然后从其上下文菜单中选择 运行 '<test name>' ,或按 Alt+Shift+R

      从运行工具窗口重新运行单个测试

      或者,使用位于测试旁边的边距图标以重新运行测试。 点击 运行已忽略测试图标重新运行失败测试图标重新运行成功测试图标 以重新运行已忽略、失败或成功的测试。

      从边距区域重新运行单个测试
    • 若要重新运行整个套件,请点击 重新运行“<suite name>”图标 (位于 运行 工具窗口的工具栏中)。

      重新运行测试套件

      或者,点击测试套件旁边的边距图标。

      从边距区域重新运行套件

使用第三方测试框架测试代码

虽然可以使用任何框架,但推荐使用 Mocha。

安装 Mocha

  1. 在嵌入式 终端Alt+F12 )中,键入以下命令之一:

    • 在项目中本地安装时,请使用 npm install mocha

    • 如需全局安装,请使用 npm install&#xa0;-g mocha

    • 使用 npm install&#xa0;--save-dev mocha 将 Mocha 安装为 开发依赖项

    详细了解请参见 Mocha 官方网站的入门指南

  2. 安装 Chai 断言库 ,以高效替代 Node.js 标准 assert 函数

    在嵌入式 终端Alt+F12 )中输入:

    npm install --save-dev chai

编写 Mocha 测试

运行 Mocha 测试

在 WebStorm 中,您可以直接从编辑器快速运行单个 Mocha 测试,也可以创建运行/调试配置以执行部分或全部测试。

从编辑器运行单个 Mocha 测试

  • 在边距中点击 运行按钮重新运行按钮 ,然后从列表中选择 运行 <test_name>

    从编辑器运行 Mocha 测试

    借助边距中的 测试状态图标 测试通过测试失败 ,您还可以在编辑器中直接查看测试是否通过或失败。

    边距区域中的测试状态

创建 Mocha 运行配置

  1. 打开 运行/调试配置对话框(在主菜单中点击 运行 | 编辑配置 ),在左侧窗格中点击 添加按钮 ,并从列表中选择 Mocha。 将打开 运行/调试配置:Mocha对话框。

  2. 指定要使用的 Node 解释器以及 mocha 包的位置。

  3. 指定应用程序的工作目录。 默认情况下, 工作目录 字段显示项目根文件夹。 如需更改此预定义设置,请指定所需文件夹的路径。

  4. 可选:

    配置在相关源文件发生更改时自动重新运行测试。 为此,请在 额外的 Mocha 选项 字段中添加 --watch 标志。

  5. 指定要运行的测试。 可以是单个测试、某个套件、整个测试文件,也可以是包含测试文件的文件夹。

    您还可以定义模式,仅运行与模式匹配的测试文件,例如 *.test.js。 如果测试文件存储在一个单独的文件夹中,例如 test ,请在模式中指定相对于工作目录的该文件夹路径:

    ./folder1/folder2/test/*.test.js

  6. 选择测试中使用的 接口

通过 Mocha 运行配置运行测试

  1. 从配置列表中选择 Mocha 运行/调试配置,然后点击列表中或工具栏上的 运行图标

    选择运行/调试配置
  2. 测试运行器 选项卡的 运行 工具窗口中监控测试执行并分析测试结果。 有关更多信息,请参见 探索测试结果

    • 使用 单击查看差异 链接打开 差异查看器 ,并比较实际结果与期望值。

    • 所选测试所属的文件名显示为链接形式。 点击该链接可跳转至源代码。

  3. 测试运行器 选项卡的 运行 工具窗口中监控测试执行并分析测试结果。 有关更多信息,请参见 探索测试结果

Mocha:监视测试

重新运行失败的 Mocha 测试

  • 点击测试结果工具栏上的 重新运行失败测试图标。 WebStorm 将执行上一次会话中失败的所有测试。

    Mocha:重新运行所有失败的测试
  • 如需重新运行某个特定的失败测试,请在其上下文菜单中选择 运行 <test name>

    从编辑器重新运行单个失败测试:右键菜单
  • 或者,单击失败测试旁边标记栏中的 失败测试图标 ,然后从列表中选择 运行 <test name>

    从编辑器重新运行单个失败测试:边距图标

如需了解详细信息,请参阅 重新运行测试

导航

使用 WebStorm,您可以在文件与相关测试文件之间跳转,或从 测试运行器标签页中的测试结果跳转到测试本身。

  • 要在测试及其测试对象之间相互跳转,请在编辑器中打开文件,然后从上下文菜单中选择 转到 | 测试(S)转到 | 测试对象 ,或直接按 Ctrl+Shift+T

  • 要从测试结果跳转到测试定义,请双击 测试运行器 标签页中的测试名称,或从上下文菜单中选择 跳转到源 ,或直接按 F4。 测试文件将在编辑器中打开,并将光标定位在测试定义处。

  • 对于失败的测试,WebStorm 会根据堆栈跟踪将您定位到测试中的失败行。 如果堆栈跟踪中没有精确的代码行,将跳转至测试定义位置。

调试测试

如果测试因未知原因失败,您可以对该测试进行调试,以查明是测试已过时还是您对源代码的修改破坏了应用程序的预期行为。

使用 WebStorm,您可以直接从编辑器快速调试单个 Mocha 测试,或创建运行/调试配置以调试部分或全部测试。

从编辑器调试单个测试

  1. 在待调试测试旁边的标记栏中设置断点。 您可以通过在 运行 工具窗口中双击失败测试或按 F4 快速跳转至失败测试。

  2. 单击标记栏中的 运行按钮重新运行按钮 ,然后从列表中选择 调试 <test_name>

  3. 调试 工具窗口中,照常操作: 单步执行程序暂停与恢复程序执行、 在程序挂起时检查状态、查看调用堆栈和变量、设置监视、计算变量值、 查看实际 HTML DOM 等等。

调试 Mocha 测试

使用 Mocha 运行/调试配置调试测试

  1. 在要调试的测试旁边设置断点。 您可以通过在 运行 工具窗口中双击失败测试或按 F4 快速跳转至失败测试。

  2. 创建一个 Mocha 运行/调试配置, 如上所述

  3. 从配置列表中选择 Mocha 运行/调试配置,并单击列表或工具栏中的 调试图标

    选择运行/调试配置
  4. 在打开的 调试工具窗口 中照常操作: 单步执行程序暂停与恢复程序执行、 在程序挂起时检查状态、查看调用堆栈和变量、设置监视、计算变量值、 查看实际 HTML DOM 等等。

详细了解请参阅 调试失败的测试

监视代码覆盖率

使用 WebStorm,您还可以监控代码中有多少被 Mocha 测试覆盖。 WebStorm 会在专属的 覆盖率 工具窗口中显示此统计信息,并在编辑器及 项目 工具窗口中以可视方式标记已覆盖和未覆盖的代码行 Alt+1。 要监控覆盖率,必须安装 nyc ,即 Istanbul 的命令行界面。

安装 nyc

  • 在嵌入式 终端Alt+F12 )中键入:

    npm install&#xa0;--save-dev nyc

运行覆盖率测试

  1. 启动测试:

    • 创建一个 Mocha 运行/调试配置 如上所述 ,从主工具栏的列表中选择,并单击列表右侧的 带覆盖率运行

      使用覆盖率启动 Mocha 测试
    • 或者,从编辑器中以覆盖模式运行特定套件或测试:单击左侧标记栏中的 运行按钮重新运行按钮 ,然后从列表中选择 使用覆盖率运行 <test_name>

  2. 覆盖工具窗口中监控代码覆盖率。 报告显示有哪些文件被测试覆盖,以及这些文件中被覆盖的代码行百分比。 您可以从报告跳转到相应文件,并查看哪些代码行已覆盖(绿色标记),哪些未覆盖(红色标记):

    Mocha 测试:覆盖率报告

在 Docker 容器中使用 Node.js 运行测试

使用 WebStorm,您可以像在本地一样,在 Docker 容器中运行 Mocha 测试。

准备工作

  1. 请确保在 设置 | 插件 页面、 已安装 选项卡中启用了所需插件: Node.jsNode.js Remote InterpreterDocker。 如需了解详细信息,请参阅 管理插件

  2. 下载、安装并配置 Docker ,具体说明请参阅 Docker

  3. 在 Docker 中配置 Node.js 远程解释器或通过 Docker Compose配置,并在项目中 将其设为默认。 还请确保与该远程解释器关联的软件包管理器已 设置为项目默认选项

  4. 打开您的 package.json 并确保所需的测试框架已列在 devDependencies 部分中:

    { "name": "node-express", "version": "0.0.0", "private": true, "dependencies": { "cookie-parser": "~1.4.4", "debug": "~2.6.9", "express": "~4.16.1", "http-errors": "~1.6.3", "morgan": "~1.9.1", "pug": "^3.0.2" }, "devDependencies": { "chai": "^4.3.4", "concurrently": "^6.3.0", "eslint": "^8.1.0", "http-server": "^14.0.0", "jest": "^27.3.1", "mocha": "^9.1.3", "nyc": "^15.1.0" } }
  5. 右键点击编辑器中任意位置,并从上下文菜单中选择 运行 '<package manager> install'

运行测试

  1. 请根据 Mocha 官方网站上的说明创建测试。

  2. 操作方式与本地开发相同:直接从编辑器运行和调试单个测试,或创建运行/调试配置以运行部分或全部测试,具体请参见上文的 运行测试调试测试

最后修改日期: 2025年 9月 26日