Question

这里是开玩笑的新手。我正在研究DOM操作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 {}

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

Answer 1

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

存放HTMLSelectElement {}的容器（我最初被忽略了）似乎可以访问它所引用元素的属性（也许还有其他数据？）。

例如，console.log(country_select);打印jQuery { '0': HTMLSelectElement {}, length: 1 }，如果我使用标准的JQuery询问方法将那个元素作为目标，我会得到大致的期望值：

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

打印country-select

如何在Jest（/ JQuery）测试中定位测试html元素？

1 个答案: