如何通过开玩笑或其他一些测试库通过JavaScript测试DOM的动态更改

Question

我在基于环境的页面加载中动态地向文档 <script>添加了一个 CC_1标签。

功能：

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>标签将其插入头部。我们的环境是用玩笑建立的，我还没有找到一个令人满意的例子，可以演示如何做或有效。

我是测试的新手，并感谢提供的任何解决方案或提示。

Answer 1

我想最简单的测试方法就是这样：

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

这是因为Jest的默认测试环境是jsdom，它模拟document。

Answer 2

test('loadScript', () => {
  loadScript();
  const script = document.getElementsByTagName('script')[0];
  // trigger the callback
  script.onreadystatechange(); // or script.onLoad();
  expect("something which you have on load").toBe('expected result on load');
});