Question

我正在根据环境在页面加载时向文档<script>动态添加一个<head>标签。

功能：

export const loadScript = () => {
  // load script tag into head
  const HEAD = document.getElementsByTagName('head')
  const SCRIPT_TAG = document.createElement('script')
  SCRIPT_TAG.setAttribute('src', process.env.SCRIPT_SRC)
  SCRIPT_TAG.setAttribute('async', true)
  HEAD[0].append(SCRIPT_TAG)
}

我想编写一个测试，检查一旦运行loadScript()函数是否将<script>标记放入头部。我们的环境是由Jest设置的，但我还没有找到一个令人满意的示例来演示如何执行或工作。

我是测试新手，不胜感激任何解决方案或提示。

Answer 1

我认为最简单的测试方法是：

test('loadScript', () => {
  process.env.SCRIPT_SRC = 'the-src';
  loadScript();
  expect(document.head.innerHTML).toBe('<script src="the-src" async="true"></script>');
});

之所以可行，是因为Jest的默认test environment是jsdom，它模拟了document。

如何使用Jest或其他测试库通过JavaScript测试DOM的动态更改？

1 个答案: