如何测试遗留jquery代码

Question

我开始将TDD引入现有的JavaScript / jQuery项目。

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

这对于无副作用，同步，不使用jQuery等的代码部分很有效。

我发现很多在线文章都是为了设置一个更具包容性的测试环境来解决个别问题，但是我没有找到一个好的入门指南，而没有潜入竞争图书馆的杂草和设置。

我不需要最好的＆＃34;回答，也没什么太花哨的。我甚至不需要模拟按钮按下或用户输入;我很高兴只是测试我的处理程序代码。

只需查找指南或一组推荐的最佳做法来测试客户端JavaScript代码，其中包括：

• 现有代码使用jQuery和AJAX;
• 测试环境应该连续运行;
• 应该从我的gruntfile启动测试环境。或者，我可以继续使用gulp或任何其他类似的驱动程序。
• 理想情况下，我希望测试在Emacs缓冲区中运行。但是，如果需要，我可以在另一个窗口中运行，我可以将其粘在屏幕的一角;
• 测试应该合理快速地进行。我希望它们在每个文件保存时自动触发。

我想我正在描述一套非常普通的测试要求，所以我希望有一些共同的答案。但是，我的搜索功能今天必须很低，因为我找不到我想要的东西。

Answer 1

如果您正在使用Mocha和Chai，那么您已经设置了基础知识。

如果您的测试代码修改了文档，您可以将人工文档替换为您的测试（通过jsdom）。

如果您的测试代码触发Ajax调用并且您想测试它们，则可以使用sinon放置假XMLHttpRequest提供程序。 sinon还为setTimeout和家人提供了方便的模拟。

如果测试中的代码使用jQuery，那么您可以分离依赖于jQuery的部分，或者只使用jsdom文档在服务器上运行jQuery。 jQuery可以轻松安装npm。

如果所有这些看起来都不够真实，并且您想要一个更真实的环境，那么您可以查看karma - 这是一个可以在后台打开浏览器的自动化工具，运行内部的任何测试并报告控制台中的错误。它比mocha慢得多，但您可以在真实的浏览器中运行代码（和测试），甚至可以在同一时间运行几个浏览器。

两种工具都有自己的位置，例如您可以使用mocha来测试vanillajs和简单的DOM修改（例如React组件，如果您正在使用它），并使用karma编写更慢，更真实的测试，这些测试更多地依赖于真实的浏览器行为