修复 async.spec.js 中的测试

介绍

在这个项目中，你将学习如何修复 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 实用函数
• 应用调试和排除测试用例故障的技术

修复 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) => {
  //...
});

4. 在终端中打开 vue-router-3.0.1 目录。
5. 运行命令 npm install 安装依赖项。这个过程可能需要一些时间，请耐心等待。（如果长时间卡住，请按 Ctrl+C 终止进程，然后再次运行此命令。）
6. 成功安装所有依赖项后，在终端中执行命令 npm run test:unit 运行单元测试。在修复之前，你会注意到上述测试脚本没有检测到任何错误。（在上述代码中，calls 的值为 [1, 2, 3]，不等于 [1, 2, 3, 4, 5]）。
7. 要修复上述问题，我们继续在 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 中练习更多实验以提升技能。