如何在此 Jest 测试中触发窗口加载事件？

Posted 2023-05-09

【中文标题】如何在此 Jest 测试中触发窗口加载事件？

【英文标题】：How do I trigger the window load event in this Jest test?

【发布时间】：2020-02-20 19:59:00

【问题描述】：

我正在尝试在我的 Rails 项目中设置我的第一个 DOM 操作/JQuery Jest 测试。就目前的基本形式而言，我只是想清除“导入的 javascript 函数可以做任何事情”的基本障碍。

为此，我在 PledgeFormUpdates.js.test 中有以下代码：

'use strict';

import pledge_form_updates from '../../app/javascript/components/PledgeFormUpdates.js';

test('Displays GDPR checkbox on EU country selection', () => 

  // Set up our document body
  document.body.innerhtml =
    '<select id="pledge_pledgor_home_country" class="country-select"></select>'// +

    pledge_form_updates();
    const $ = require('jquery');

    $(window).trigger('load');
    $("#pledge_pledgor_home_country").trigger('change');
);

在 PledgeFormUpdates.js 我有以下内容：

export default function() 
  console.log('hello world');
  window.addEventListener("load", function() 

    console.log('mellow curled');
    $("#pledge_pledgor_home_country").change(function() 
      console.log('yellow twirled')
    );
  );
;

所以当我运行测试时，我希望看到打印输出包括“hello world”、“mellow curled”和“yellow twirled”。但实际上它在第一次输出后停止，因此可能窗口 load 事件实际上并没有被触发（我通过注释掉 window.addEventListener... 行确认了这一点，然后看到所有三个打印输出）。

我在这里做错了什么——或者更确切地说，我应该如何触发加载事件？ （我也试过$(window).load();，但这只会引发 TypeError）

【参考方案1】：

我找到了一个解决方法，虽然它看起来很老套。在测试文件中，如果我替换行

window.addEventListener("load", function() ,

与

$(window).on("load", function()

然后运行测试（包括$(window).trigger('load'); 语句）打印所有日志行。

我一定是遗漏了一些东西，因为我不敢相信 Jest 会需要 JQuery 来触发页面加载事件，但至少现在这可行。