如何使用 Jest 测试此功能？答案

【问题标题】：How can I test this function with Jest?如何使用 Jest 测试此功能？
【发布时间】：2019-04-15 14:28:41
【问题描述】：

我正在尝试对打字机功能进行单元测试，但无论我做什么，收到的值都是未定义的。

我查看了 Jest 文档，也尝试了异步但没有运气。

let speed = 120;

  function typeWriter(id, text) {
    return function () {
      if (text) {
        document.getElementById(id).innerHTML += text[0];
        setTimeout(typeWriter(id, text.slice(1)), speed);
      }
    };
  }
typeWriter("job-title", "Web Developer")();

我期望 ID 为 job-title 的元素的 innerHTML 值是 Web Developer 而不是 undefined。

【问题讨论】：

输出是什么意思？
打字机函数接受一个元素的 id 和一个字符串值，这些值将一次一个字符地添加到目标元素。所以输出将是目标元素的 innerHTML 值。
当我运行这个脚本时，我确实在元素中看到了Web Developer。你在看什么？不明确的？（哦，顺便说一句，请使用textContent 而不是innerHTML，因为您的代码存在innerHTML 的安全漏洞。）
感谢您回复我。也许我应该更清楚一点，它在浏览器中运行良好，但我无法用 Jest 成功测试它。

标签： javascript unit-testing jestjs

【解决方案1】：

您需要像这样使用Jest Timer Mocks：

let speed = 120;

function typeWriter(id, text) {
  return function () {
    if (text) {
      document.getElementById(id).innerHTML += text[0];
      setTimeout(typeWriter(id, text.slice(1)), speed);
    }
  };
}

describe('typeWriter', () => {
  beforeEach(() => { jest.useFakeTimers(); });
  afterEach(() => { jest.useRealTimers(); });

  it('should work', () => {
    document.body.innerHTML = '<div><span id="job-title"></span></div>';
    const text = "Web Developer";

    typeWriter("job-title", text)();

    for (let i = 1; i <= text.length; i++) {
      expect(document.getElementById('job-title').innerHTML).toBe(text.substring(0, i));
      jest.advanceTimersByTime(speed);
    }
  });
});

【讨论】：