修复async.spec.js中的测试

JavaScriptJavaScriptBeginner
立即练习

💡 本教程由 AI 辅助翻译自英文原版。如需查看原文,您可以 切换至英文原版

简介

在这个项目中,你将学习如何修复 vue-router-3.0.1 项目中 async.spec.js 文件的一个问题。async.spec.js 文件包含一个未能正确检测错误的测试用例,你的任务是修改代码以确保测试按预期通过。

👀 预览

Message:
    预期 $.length = 3 等于 5。
    预期 $[3] = undefined 等于 4。
    预期 $[4] = undefined 等于 5。

🎯 任务

在这个项目中,你将学习:

  • 如何在 vue-router-3.0.1 项目中定位和修改 async.spec.js 文件
  • 如何理解现有测试用例的问题
  • 如何进行必要的更改以修复测试用例

🏆 成果

完成这个项目后,你将能够:

  • 识别并修复单元测试中的问题
  • 使用异步代码和 runQueue 实用函数
  • 应用调试和排除测试用例故障的技术

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL javascript(("`JavaScript`")) -.-> javascript/BasicConceptsGroup(["`Basic Concepts`"]) javascript(("`JavaScript`")) -.-> javascript/AdvancedConceptsGroup(["`Advanced Concepts`"]) javascript/BasicConceptsGroup -.-> javascript/array_methods("`Array Methods`") javascript/AdvancedConceptsGroup -.-> javascript/async_prog("`Asynchronous Programming`") javascript/AdvancedConceptsGroup -.-> javascript/error_handle("`Error Handling`") subgraph Lab Skills javascript/array_methods -.-> lab-445743{{"`修复async.spec.js中的测试`"}} javascript/async_prog -.-> lab-445743{{"`修复async.spec.js中的测试`"}} javascript/error_handle -.-> lab-445743{{"`修复async.spec.js中的测试`"}} end

修复 async.spec.js 中的测试

首先,在编辑器左侧目录中可以看到 vue-router-3.0.1 文件夹。

在这一步中,你将学习如何修复 vue-router-3.0.1 项目中 async.spec.js 文件的问题。

  1. 打开 vue-router-3.0.1/test/unit/specs/async.spec.js 文件。
  2. 找到 it("should work", (done) => {... }) 代码块。
  3. const queue = [1, 2, 3, 4, 5].map 改为 const queue = [1, 2, 3].map,以便于我们进行测试。
const queue = [1, 2, 3].map((i) => (next) => {
  //...
});
  1. 在终端中打开 vue-router-3.0.1 目录。
  2. 运行命令 npm install 安装依赖项。这个过程可能需要一些时间,请耐心等待。(如果长时间卡住,请按 Ctrl+C 终止进程,然后再次运行此命令。)
  3. 成功安装所有依赖项后,在终端中执行命令 npm run test:unit 运行单元测试。在修复之前,你会注意到上述测试脚本没有检测到任何错误。(在上述代码中,calls 的值为 [1, 2, 3],不等于 [1, 2, 3, 4, 5])。
  4. 要修复上述问题,我们继续在 vue-router-3.0.1/test/unit/specs/async.spec.js 文件中进行如下更改:
const queue = [1, 2, 3].map((i) => (next) => {
  calls.push(i);
  setTimeout(next, 0);
});

这里的更改是将 setTimeout(done, 0) 改为 setTimeout(next, 0),使函数不会立即跳出。

运行测试

在这一步中,你将重新构建 vue-router-3.0.1 项目并测试修复效果。

  1. 重新执行 npm run test:unit 命令来运行单元测试。
  2. 修复后,你应该会看到以下输出:
Message:
    预期 $.length = 3 等于 5。
    预期 $[3] = undefined 等于 4。
    预期 $[4] = undefined 等于 5。

这表明 async.spec.js 测试已成功修复。

✨ 查看解决方案并练习

总结

恭喜!你已完成此项目。你可以在 LabEx 中练习更多实验以提升技能。

您可能感兴趣的其他 JavaScript 教程