时间戳

首页 > 解决方案 > 如何用玩笑测试传递给 document.body.appendChild 的参数

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

问题描述

我有一个创建脚本元素并将其添加到正文的函数。它看起来有点像这样：

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: '...' }没有运气。还有什么其他选项可以开玩笑地测试这段代码？

标签： javascriptjestjs

解决方案

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

推荐阅读