javascript - 如何用 Jest 测试传递给 document.body.appendChild 的参数

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 对象。

您可以通过使用 expect.objectContaining 检查其属性来测试是否正确创建了 HTMLScriptElement:

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!
});