Jest - 在特定元素上测试 jquery fadeIn/fadeOut答案

【问题标题】：Jest - test jquery fadeIn/fadeOut on specific elementsJest - 在特定元素上测试 jquery fadeIn/fadeOut
【发布时间】：2020-04-18 20:02:06
【问题描述】：

我正在尝试为我正在使用 jquery 构建的 Web 应用程序编写一些测试。我有一些功能可以淡入淡出某些元素，并希望确保这些元素按预期显示。我正在使用 jest 进行测试，但我还没有弄清楚如何查看是否在特定元素上调用了 $(...).fadeIn() 或 $(...).fadeOut()。这是一个例子

假设这是 dom

<div>
 <span id="show-this" style="display: none"></span>
 <span id="hide-this"></span>
</div>

这是我要测试的功能

function showAndHide() {
  $('#show-this').fadeIn();
  $('#hide-this').fadeOut();
}

目前我能做的最好的测试是监视fadeIn 和fadeOut，看看它们是否被调用。

it('should display the element', () => {
  const spyFadeIn = jest.spyOn($.fn, 'fadeIn');
  showAndHide();
  expect(spyFadeIn).toHaveBeenCalled();
});

it('should hide the element', () => {
  const spyFadeOut = jest.spyOn($.fn, 'fadeOut');
  showAndHide();
  expect(spyFadeOut).toHaveBeenCalled();
});

这是一个很好的解决方法，但在这种情况下不会起作用，因为如果我淡出#show-this 和淡入淡出#hide-this，测试将通过，我希望这会导致测试失败。我尝试检查函数的参数，因为我知道在场景下这个函数接收元素作为参数，但开玩笑没有看到。有什么想法吗？因此，我陷入了单元测试的困境。

【问题讨论】：

标签： jquery unit-testing jestjs fadein fadeout

【解决方案1】：

你可以做的是检查你的元素在fadeIn/fadeOut生效后应该有的样式。通常fadeIn/fadeOut 会随着时间的推移进行动画处理，但Jest 无法处理，因此我们还需要在每次测试之前禁用jQuery 效果。测试套件将如下所示：

describe('fadeIn/fadeOut tests', () => {
  beforeEach((): void => {
    $.fx.off = true; // Disable jQuery animations
  });

  afterEach((): void => {
    $.fx.off = false; // Enable jQuery animations
  });

  test('#show-this should fade in.', () => {
    showAndHide();
    expect($('#show-this').css('display')).toStrictEqual('block');
  });

  test('#hide-this should fade out.', () => {
    showAndHide();
    expect($('#hide-this').css('display')).toStrictEqual('none');
  });
});

【讨论】：