如何使用 jest 测试传递给 document.body.appendChild 的 args

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: '...' }运气不好。还有什么其他选项可以用来测试这段代码？

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