如何在使用 jQuery.noConflict(true) 运行的 QUnit 测试中使用 Blanket.js答案

【问题标题】：How to use Blanket.js with QUnit tests run with jQuery.noConflict(true)如何在使用 jQuery.noConflict(true) 运行的 QUnit 测试中使用 Blanket.js
【发布时间】：2014-06-11 07:21:56
【问题描述】：

我正在使用QUnit 来测试我正在编写的jQuery plugin，并希望使用blanket 来生成覆盖信息。

我的测试看起来像：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>My Awesome Test Suite</title>
  <!-- Load local jQuery. This can be overridden with a ?jquery=___ param. -->
  <script src="../libs/jquery-loader.js"></script>

  <!-- Load local QUnit. -->
  <link rel="stylesheet" href="../libs/qunit/qunit.css" media="screen">
  <script src="../libs/qunit/qunit.js"></script>

  <!-- Code Coverage with Blanket -->
  <script src="../node_modules/blanket/dist/qunit/blanket.min.js"></script>

  <!-- Load local lib and tests. -->
  <script src="../build/thingToTest.js" data-cover></script>
  <script src="../build/test/thingToTest_test.js"></script>
  <!-- Removing access to jQuery and $. But it'll still be available as _$, if
       you REALLY want to mess around with jQuery in the console. REMEMBER WE
       ARE TESTING A PLUGIN HERE, THIS HELPS ENSURE BEST PRACTICES. REALLY. -->
  <script>window._$ = jQuery.noConflict(true);</script>
</head>
<body>
  <div id="qunit">
    <h1 id="qunit-header">QUnit Tests</h1>
    <h2 id="qunit-banner"></h2>
    <div id="qunit-testrunner-toolbar"></div>
    <h2 id="qunit-userAgent"></h2>
  </div>
  <ol id="qunit-tests"></ol>
  <div id="qunit-fixture">
    <div class="thingToTest-container">
    </div>
  </div>
</body>
</html>

当我在浏览器中打开它时，我看到了 enable coverage 选项，但是当我检查该选项时，我得到了错误

TypeError: 'undefined' is not an object (evaluating '$.fn')
Source: file:///Users/dave/src/thingToTest/test/thingToTest.html?coverage=true:317

如果我注释掉这一行

<script>window._$ = jQuery.noConflict(true);</script>

然后blanket 工作正常。

在简单的情况下这是可以接受的，但在更复杂的情况下，我真的想以noConflict 模式加载 jQuery 以确保测试纯度。

有没有办法做到这一点？

【问题讨论】：

标签： javascript jquery testing code-coverage blanket.js

【解决方案1】：

我遇到了同样的问题。我在 qUnit 测试的 HTML 中的 jQuery 脚本标签中添加了 data-cover 并且它有效，我认为仪器需要看到它。

编辑

我还在我的 html 中为 qUnit 注意到了这一行。

<!-- Removing access to jQuery and $. But it'll still be available as _$, if
  you REALLY want to mess around with jQuery in the console. REMEMBER WE
  ARE TESTING A PLUGIN HERE, THIS HELPS ENSURE BEST PRACTICES. REALLY. -->
<script>window._$ = jQuery.noConflict(true);</script>

通过删除该块，它不再需要 jQuery 标记上的数据覆盖。

【讨论】：

谢谢。我想知道哪个更好，为整个 jQuery 添加覆盖（不太可能提供合理的覆盖统计）或不在noConflict 模式下运行 jQuery。我怀疑是后者，但我正在寻找一种解决方案，让我可以利用noConflict。