如何使用毛毯与QUnit测试运行jQuery.noConflict(true)

How to use Blanket.js with QUnit tests run with jQuery.noConflict(true)

本文关键字:noConflict true jQuery 测试运行 何使用 毛毯 QUnit      更新时间:2023-09-26

我使用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,以确保测试的纯度。

有办法做到这一点吗?

我也遇到了同样的问题。我在HTML中为qUnit测试的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标签上的data-cover