12 款 JS 代码测试必备工具

   <p>每天都会产生新的代码、 <a href="/misc/goto?guid=4959730116309471084" rel="nofollow,noindex">用户测试</a> 工具和框架。下面的列表列出了可以完成各种测试需求的代码工具。你应该调查研究一下，看这些工具是否适用于你的技术栈和技术需求。</p>    <h3>01. <a href="/misc/goto?guid=4959554590782762596" rel="nofollow,noindex">Jasmine</a></h3>    <p><img src="https://simg.open-open.com/show/edc9a2c0485b6ff7e7dd3918ed0d3c70.png"></p>    <p>Jasmine 是一个行为驱动的测试开发框架，用于对 JavaScript 代码进行测试。它不依赖其它任何 JavaScript 框架，也不需要 DOM。它的语法简洁、明确，写测试非常容易。</p>    <h3>02. <a href="/misc/goto?guid=4958865832896194424" rel="nofollow,noindex">Mocha</a></h3>    <p>Mocha 是一个功能丰富的 JavaScript 测试框架，既运行于 Node.js 环境中，也可以运行于浏览器环境中。Mocha 以串行方式运行测试，能做出灵活而准确的报告，也能将测试中未捕捉的异常映射到正确的测试用例。</p>    <p><img src="https://simg.open-open.com/show/0e540b78fba6ffe0b6d2c9be1b69db4f.png"></p>    <h3>03. <a href="/misc/goto?guid=4958830654755354669" rel="nofollow,noindex">Chai</a></h3>    <p>Chai 是个支持 BDD / TDD 的库，可用于 <a href="/misc/goto?guid=4958189735229147892" rel="nofollow,noindex">node</a> 和浏览器，可配合任何 JavaScript 测试框架使用。</p>    <h3>04. <a href="/misc/goto?guid=4958527979723316370" rel="nofollow,noindex">QUnit</a></h3>    <p><img src="https://simg.open-open.com/show/97132da1d70d5378eaf0526704846d7f.png"></p>    <p>QUnit 是个功能强大又易于使用的 JavaScript 单元测试框架。jQuery、jQuery UI 和 jQuey Mobile 项目都使用这个框架，它能测试普通的 JavaScript 代码。</p>    <h3>05. <a href="/misc/goto?guid=4958527979825761315" rel="nofollow,noindex">Sinon</a></h3>    <p>Sinon.JS 为 JavaScript 提供了独立的 spies、stubs 和 mocks [译者注：Spy、Stub 和 Mock 都是测试专用名词，Stub 常被翻译为桩，spies 是 Spy 的复数形式，是一种可以监视方法、调用和参数的技术]。它不依赖任何东西，可以配合任何单元测试框架工作。</p>    <h3>06. <a href="/misc/goto?guid=4959728612606325007" rel="nofollow,noindex">Karma</a></h3>    <p>Karma 是针对连通浏览器的一个框架无关测试运行器。每一个测试结果对应每个浏览器，它的测试和显示都是通过命令行暴露给开发者的，这样他们就可以看到浏览器测试的通过或失败。</p>    <h3>07. <a href="/misc/goto?guid=4958877428462412576" rel="nofollow,noindex">Selenium</a></h3>    <p><img src="https://simg.open-open.com/show/aec8fce5f096b1557c1d3cdfe09c2c45.jpg"></p>    <p>Selenium 有一个简单的目标：就是自动化浏览器。它主要用于自动化测试 web 应用程序，但是只是很简单地考虑到了基于网络的管理任务。</p>    <h3>08. <a href="/misc/goto?guid=4959638249352007937" rel="nofollow,noindex">WebdriverIO</a></h3>    <p>WebdriverIO 允许用户仅添加几行代码就可以控制浏览器或移动应用程序，使测试代码更简单、简洁、易读。集成的 TestRunner 同样允许你以同步的方式调用异步命令，这样你不需要关心如何处理 Promise 以避免竞态条件。此外，它取消了所有的繁琐的设置工作，并且会为您管理的 Selenium 会话。</p>    <h3>09. <a href="/misc/goto?guid=4958826167751782411" rel="nofollow,noindex">Nightwatch</a></h3>    <p><img src="https://simg.open-open.com/show/5f425f31f5adedb52909d9b0d62a0fa6.png"></p>    <p>Nightwatch.js 是一个易于使用的 Node.js，它是为基于浏览器的 app 和网站设计的终端到终端（E2E）的测试方法。它使用强大的 <a href="/misc/goto?guid=4959730116709080362" rel="nofollow,noindex"> <em>W3C WebDriver API</em> </a> ，用于在 DOM 元素上执行命令和断言。</p>    <h3>10. <a href="/misc/goto?guid=4959553490127007736" rel="nofollow,noindex">PhantomCSS</a></h3>    <p>PhantomCSS 获得 CasperJS 捕获的屏幕截图，并使用 Resemble.js 将其与基准图进行对比，以测试 RGB 像素差异。 PhantomCSS 然后生成图像差异对比，用于帮助您找到原因。</p>    <h3>11. <a href="/misc/goto?guid=4959638249954356180" rel="nofollow,noindex">PhantomFlow</a></h3>    <p>PhantomFlow 使用决策树提供 UI 测试方案。针对 <a href="/misc/goto?guid=4959730116857725313" rel="nofollow,noindex">PhantomJS</a> ,  <a href="/misc/goto?guid=4959730116953979581" rel="nofollow,noindex">CasperJS</a> 和  <a href="/misc/goto?guid=4959730117047528703" rel="nofollow,noindex">PhantomCSS</a> 的 NodeJS 包装器—— PhantomFlow 能够流畅地在代码中描述用户流程，同时生成用于可视化的结构化树数据。</p>    <h3>12. <a href="/misc/goto?guid=4959729134710889440" rel="nofollow,noindex">Percy.io</a></h3>    <p>Percy 提供关于视觉变化的迭代及快速反馈，带来了所谓的连续视觉集成。它是通过下面方式实现的：运行测试套件，获取 DOM 快照并上传到 Percy 服务，最终在浏览器中渲染之。</p>    <p> </p>    <p>来自：http://web.jobbole.com/89505/</p>    <p> </p>