DOM 조작을 위해 Jest 쓰기 단위 테스트 사용

12986 단어 testingjavascript
안녕하세요 클락입니다! 오늘 우리는 DOM 조작을 위한 단위 테스트의 테스트 케이스를 작성할 것입니다.

하나의 파일index.html에 HTML 및 JavaScript 조각 코드가 있는 경우 다음은 할 일 목록입니다.

<html>
  <body>
    <input id="newTodo" />
    <button onclick="addTodo()">Add todo</button>
    <ol id="todoList"></ol>
    <script>
      const addTodo = () => {
        const newTodoInput = document.getElementById('newTodo');
        let currentTodoList = document.getElementById('todoList').innerHTML;
        currentTodoList += `<li>${newTodoInput.value}</li>`;
        document.getElementById('todoList').innerHTML = currentTodoList;
        newTodoInput.value = '';
      }
    </script>
  </body>
</html>


음...이 할일 목록은 사람들이 테스트 케이스를 작성하는 방법을 잘 모릅니다. 이 코드는 DOM과 JavaScript의 논리를 혼동하기 때문입니다. 따라서 우선 index.html에서 할일 목록 분해 제어 논리를 수행해야 합니다.

<html>
  <body>
    <input id="newTodo" />
    <button id="addTodo">Add todo</button>
    <ol id="todoList"></ol>

    <script type="text/javascript" src="./todolist.js"></script>
  </body>
</html>


todo 목록 이동 로직 정보todoList.js 파일:

const addTodo = () => {
  const newTodoInput = document.getElementById('newTodo');
  let currentTodoList = document.getElementById('todoList').innerHTML;
  currentTodoList += `<li>${newTodoInput.value}</li>`;
  document.getElementById('todoList').innerHTML = currentTodoList;
  newTodoInput.value = '';
}

document.getElementById('addTodo').addEventListener('click', addTodo);


현재 보기는 보기이고 논리는 논리이므로 JavaScript에 대한 테스트 사례를 매우 쉽게 작성할 수 있지만...DOM이 없습니다. 어떻게 트리거해야 합니까addTodo? 예! 그래서 우리는 addTodo의 테스트 케이스를 위해 DOM을 준비해야 합니다!

언급한 대로document of Jest:

Jest ships with jsdom which simulates a DOM environment as if you were in the browser. This means that every DOM API that we call can be observed in the same way it would be observed in a browser!



따라서 Jest를 사용할 때 DOM 환경을 매우 쉽게 시뮬레이션하고 Jest 설치를 시작하고 테스트 케이스를 작성할 수 있습니다!

프로젝트에 Jest 설치(npm 또는 NodeJS 환경이 없는 경우 시작하기 전에 Node를 다운로드해야 함):

npm install jest


다음으로 파일todoList.test.js을 추가하고 테스트 사례를 작성합니다.

test('Check addTodo able add todo to todoList', () => {

});


위의 테스트 케이스 이름처럼 테스트 기능addTodo이 todoList에 실제 추가될 수 있기를 원합니다.

쓰기 테스트 사례를 세 부분으로 나누었습니다.

  • 어떤 요소가 addTodo 필요한지 알아내야 합니까? todoList.js를 살펴보겠습니다. 먼저 id가 button인 addTodo가 필요합니다. 이를 위해 addTodo의 클릭 이벤트를 추가하고 id가 input인 newTodo도 필요합니다. 마지막으로 필요한 id의 aol는 할 일 목록을 표시하기 위한 todoList입니다.

    예! 세 가지 요소만 있으면 addTodo 필요합니다! HTML 파일의 다른 요소는 신경 쓰지 않고 테스트 사례를 위한 요소만 준비합니다.


    • test('Check addTodo able add todo to todoList', () => {
  document.body.innerHTML = `
    <input id="newTodoInput" />
    <button id="addTodoBtn">Add todo</button>
    <ol id="todoList"></ol>
  `;
});


  • require 가져오기todoList.js 파일을 사용하여 준비된 요소에 로직을 추가합니다. 로직은 addTodo 입니다. 테스트 케이스에서도 테스트 대상입니다.

    • test('Check addTodo able add todo to todoList', () => {
  document.body.innerHTML = `
    <input id="newTodoInput" />
    <button id="addTodoBtn">Add todo</button>
    <ol id="todoList"></ol>
  `;
  require('../todolist.js');
});


  • 선택기 가져오기 요소를 사용하고 새 할일 이름input을 작성하고 addTodo로 트리거button한 다음 innerHTML의 ol가 올바른지 확인하여 새 할일 추가!

    • test('Check addTodo able add todo to todoList', () => {
  document.body.innerHTML = `
    <input id="newTodoInput" />
    <button id="addTodoBtn">Add todo</button>
    <ol id="todoList"></ol>
  `;
  require('../todolist.js');

  const newTodoInput = document.getElementById('newTodoInput');
  const addTodoBtn = document.getElementById('addTodoBtn');
  const todolist = document.getElementById('todoList');

  newTodoInput.value = 'New todolist!';
  addTodoBtn.click();

  expect(todolist.innerHTML).toBe('<li>New todolist!</li>');
});


    이제 todoList.js에 대한 첫 번째 테스트 케이스를 마칩니다! 논리가 올바른 경우 테스트 확인을 실행해 보겠습니다.



    이 게시물을 읽어 주셔서 감사합니다. 질문이 있거나 게시물에서 잘못된 개미를 찾으면 저를 위해 토론을 제출하십시오! 😃

    한편, 이 게시물은 내 블로그에 동시 게시됩니다: Jest | Use Jest write unit testing for DOM manipulation
    vuex로 양식 처리를 만드는 방법
    Docker Compose를 사용하여 Jenkins 설치

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage