Как проверить аргументы, переданные в document.body.appendChild с помощью jest

Question

У меня есть функция, которая создает элемент сценария и добавляет его в тело.Это выглядит примерно так:

const s = document.createElement('script');
s.type = 'text/javascript';
s.src = 'https://myscript';
s.id = 'abc';

document.body.appendChild(s);

Я использую тестирование с использованием jest и слежу за функцией appendChild, чтобы утверждать, что переданные параметры - это то, что я ожидаю.Что у меня выглядит так:

jest.spyOn(document.body, 'appendChild');

doFunction();

expect(document.body.appendChild).toBeCalledWith(
  '<script id="abc" src="https://myscript" type="text/javascript" />',
);

Несмотря на совпадение строк, аргумент, который передается в appendChild, не строка, а объект.

typeof document.body.appendChild.mock.child[0][0] // object

Я также пытался утверждать против объекта ({ type: '...' }, но не повезло. Какие еще варианты есть с jest для проверки этого бита кода?

Answer 1

Как указывает @Alex, document.createElement создает объект HTMLScriptElement.

Вы можете проверить правильность создания HTMLScriptElement, проверив его свойства, используя expect.objectContaining:

const doFunction = () => {
  const s = document.createElement('script');
  s.type = 'text/javascript';
  s.src = 'https://myscript';
  s.id = 'abc';

  document.body.appendChild(s);
}

test('doFunction', () => {
  jest.spyOn(document.body, 'appendChild');

  doFunction();

  expect(document.body.appendChild).toBeCalledWith(
    expect.objectContaining({
      type: 'text/javascript',
      src: 'https://myscript/',
      id: 'abc'
    })
  ); // Success!
});

Answer 2

Вы можете утверждать, что appendChild вызывается с элементом HTML, что и возвращает document.createElement.

expect(document.body.appendChild).toBeCalledWith(expect.any(HTMLElement));

Вы можете дополнительно уточнить свой тест, проверив, что он был вызван с помощью элемента script.

expect(document.body.appendChild).toBeCalledWith(expect.any(HTMLScriptElement));