如何在 Jest (/JQuery) 测试中定位测试 html 元素？

Posted 2023-05-09

【中文标题】如何在 Jest (/JQuery) 测试中定位测试 html 元素？

【英文标题】：How do I target test html elements in a Jest (/JQuery) test?

【发布时间】：2020-02-20 16:17:55

【问题描述】：

在这里开玩笑的新手。我正在研究 DOM-manipulation Jest doc here，最终在我们的 Rails 应用程序中测试 JQuery 更改触发器，但是在尝试让 JQuery 识别我的测试 html 中的特定元素时，在早期的障碍中失败了。所以我有一个PledgeFormUpdates.test.js 文件来模拟表单的一部分，这是我的第一个非玩具 Jest 测试，它看起来像这样：

'use strict';

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

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

  pledge_form_updates();

  // Set up our document body
  document.body.innerHTML =
    '<select id="pledge_pledgor_home_country" class="country-select">' +
    '  <option value="Brazil" selected>Brazil</option>' +
    '  <option value="Germany">Germany</option>' +
    '</select>' +

    '<div id="js-gdpr-input" class="hidden">' +
    '  <div class="form-group">' +
    '    <div class="field-group" data-children-count="1">' +
    '      <input name="pledge[receive_comms]" disabled="disabled" type="hidden" value="0">' +
    '      <input type="checkbox" value="1" name="pledge[receive_comms]" id="pledge_receive_comms">' +
    '      <label for="pledge_receive_comms" class="standard-label -checkbox">' +
    "        I'd like to be kept in the loop via the Founders Pledge email digest." +
    '      </label>' +
    '    </div>' +
    '  </div>' +
    '</div>'

  const $ = require('jquery');
  var country_select = $('#pledge_pledgor_home_country')
  console.log(country_select[0])
);

目前我对此没有任何期望（除非有人要求，否则我不会浪费空间来描述它正在测试的 JS 文件，因为目前我什至在我到达那一步之前就遇到了意想不到的行为）。我希望最后一行打印出这样的内容：

<select id="pledge_pledgor_home_country">
  <option value="Brazil" selected="">Brazil</option>
  <option value="Germany">Germany</option>
</select>

（...或者只是 undefined 如果它什么也没找到 - 我通过将 country_select 设置为 $('#wibble') 来确认）

但是我得到了一些我不明白的东西：

HTMLSelectElement 

这个对象是什么，更重要的是，我如何访问我实际定位的元素？

【参考方案1】：

我已经解决了提出的问题；虽然我怀疑答案很快就会在这里引出另一个问题。

包含HTMLSelectElement （我最初忽略了）的容器似乎可以访问它所指元素的属性（可能还有其他数据？）。

例如，console.log(country_select); 打印 jQuery '0': HTMLSelectElement , length: 1 ，如果我使用标准的 JQuery 查询方法定位 那个 元素，我会得到大致预期的结果：

console.log(country_select.attr('class');

打印country-select