如何为 vanilla JavaScript 函数编写快照测试？

Question

我编写了一个函数，在单击按钮时向按钮添加一个类：

export default function () {
  const button = document.getElementById('button');
  button.addEventListener('click', ((event) => {
    event.target.classList.add('is-active');
  }));
};

我想写一个Jest 快照测试。 但是所有的例子都参考了 React。 我在将示例翻译成普通 JavaScript 时遇到了麻烦。

如何为上述功能编写快照测试？

Answer 1

要进行设置，请将您的按钮添加到 DOM 并初始化initButton()函数。 然后单击按钮并在快照上断言。

import initButton from './button';

it('should add class to button when clicked', () => {
  document.body.innerHTML = '<button id="button">Click me!</button>';
  initButton();

  document.getElementById('button').click();

  expect(document.body).toMatchSnapshot();
});

快照将输出：

exports[`should add class to button when clicked 1`] = `
<body>
  <button
    class="is-active"
    id="button"
  >
    Click me!
  </button>
</body>
`;

如何为 vanilla JavaScript 函数编写快照测试？

问题描述

1 个解决方案

解决方案1
2 已采纳 2019-09-13 19:07:39

如何为 vanilla JavaScript 函数编写快照测试？

问题描述

1 个解决方案

解决方案1 2 已采纳 2019-09-13 19:07:39

解决方案1
2 已采纳 2019-09-13 19:07:39