Javascript 如何测试遗留jquery代码

我开始在现有的JavaScript/jQuery项目中引入TDD

目前，我正在Emacs的CLI shell中使用Grunt下的Mocha和Chai进行测试

这对于代码中没有副作用、同步、不使用jQuery等的部分非常有效

我在网上找到了许多关于建立一个更具包容性的测试环境中的个别问题的文章，但是我没有找到一个好的入门指南，没有深入到相互竞争的库和设置中去

我不需要“最好”的答案，也不需要太花哨的东西。我甚至不需要模拟按钮按下或用户输入；我很高兴测试我的处理程序代码

正在寻找一个指南或一组推荐的最佳实践来测试客户端JavaScript代码，其中：

• 现有代码使用jQuery和AJAX
• 测试环境应持续运行
• 测试环境应该从我的GrunFile启动。或者，我可以换成gulp或其他类似的司机
• 理想情况下，我希望测试在Emacs缓冲区中运行。但是，如果需要的话，我可以让它在另一个窗口中运行，我可以把它放在屏幕的一角
• 测试应该运行得相当快。我希望它们在每次保存文件时自动触发

---

我想我描述的是一组非常普通的测试需求，所以我希望有一些常见的答案。但是，我今天的搜索范围一定很低，因为我找不到我想要的东西。

如果你用的是摩卡和柴，那么你已经有了基本的设置

如果测试中的代码修改了文档，您可以用人工文档代替测试（通过

jsdom

）

如果您正在测试的代码触发Ajax调用，并且您希望测试它们，那么可以使用

sinon

来放置一个假的

XMLHttpRequest

提供程序

sinon

还为

setTimeout

和该系列提供了方便的模拟

如果测试中的代码使用jQuery，那么您可以分离依赖jQuery的部分，或者使用

jsdom

文档在服务器上运行jQuery

jQuery

使用npm轻松安装

---

如果所有这些对于您的目的来说都不够现实，并且您想要一个更真实的环境，您可以查看

karma

——这是一个自动化工具，可以在后台打开浏览器，在内部运行任何测试，并在控制台中报告错误。它比摩卡要慢得多，但是你可以在一个真正的浏览器中运行你的代码（和测试），甚至可以同时在几个浏览器中运行

---

这两种工具都有自己的位置，例如，你可以使用

mocha

来测试vanillajs和简单的DOM修改（如果你喜欢，也可以使用React组件），并借助

karma

来编写更慢、更真实的测试，更依赖于真实的浏览器行为。

听起来sinon和jsdom更像是我想要的方向，至少现在是这样。我会仔细看看。有没有关于如何组合这些片段的示例或推荐教程？我发现了许多诱人的提示，比如，但还不确定它们是如何结合在一起的，或者哪些是可靠的。

mocha jsdom

包为您进行dom设置，sinon可以直接从

beforeach（）

和

afterEach（）

中使用。很酷，谢谢。我现在刚找到摩卡jsdom，正在查看。