Как настроить таргетинг HTML-элементов теста в тесте Jest (/ JQuery)?

Question

Шутка новичка здесь. Я работаю через Dest-манипуляцию DOM здесь , в конечном счете, чтобы протестировать триггер изменения JQuery в нашем приложении Rails, но проваливаюсь рано, когда пытаюсь заставить 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