如何為 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