Question

我想测试jQuery动画状态而不必等待它们使用Jest测试框架完成。我尝试使用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>

用Jest测试jQuery动画

2 个答案: