javascript - 使用 Jest 测试 jQuery 动画

Question

我想使用 Jest 测试框架测试 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/