测试jQuery的动画与玩笑

Question

我想测试一下jQuery的动画状态，而无需等待他们用玩笑测试框架来完成。我试着使用jest.useFakeTimers和所有相关的定时器的方法，但没有成功。

$(() => {
  const $button = $('button');
  const $ul = $('ul');
  
  $button.click(() => {
    $ul.slideToggle();
  });
  
  // Random Test - Not Jest
  $button.click();
  console.log("Visible", $ul.is(':visible') === true);
  $button.click();
  console.log("Hidden", $ul.is(':visible') === false);
});

ul { display: none; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button>Toggle</button>
<ul>
  <li>A</li>
  <li>B</li>
  <li>C</li>
</ul>

Answer 1

jQuery提供的fx.off设置，这将迫使动画，自动跳转到他们的最终状态。

beforeAll(() => {
  $.fx.off = true;
});

afterAll(() => {
  $.fx.off = false;
});

test('whatever you want', () => {
 // ....
})

该文档是在这里：https://api.jquery.com/jquery.fx.off/

Answer 2

你可以嘲笑/钩jQuery.speed让所有的动画是即时的。

$(() => {
  const $button = $('button');
  const $ul = $('ul');
  
  $button.click(() => {
    $ul.slideToggle();
  });

  // Hook/Mock jQuery.speed
  const OGSpeed = jQuery.speed;
  jQuery.speed = function(_speed, easing, callback) {
    return OGSpeed(0, easing, callback);
  };

  // Random Test - Not Jest
  $button.click();
  console.log("Visible", $ul.is(':visible') === true);
  $button.click();
  console.log("Hidden", $ul.is(':visible') === false);
});

ul { display: none; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button>Toggle</button>
<ul>
  <li>A</li>
  <li>B</li>
  <li>C</li>
</ul>