[typescript] 타입스크립트와 Jest를 활용하여 버튼 클릭 이벤트를 테스트하는 방법

11 Dec 2023

typescript

도입

타입스크립트는 정적 타입을 지원하는 자바스크립트의 슈퍼셋 언어이며, Jest는 페이스북에서 만든 테스트 프레임워크입니다. 이 둘을 결합하여 버튼 클릭 이벤트를 테스트하는 방법을 알아보겠습니다.

버튼 클릭 이벤트를 테스트하는 방법

Jest를 사용하여 타입스크립트로 작성된 코드에서 버튼 클릭 이벤트를 테스트하는 방법은 다음과 같습니다.

먼저, 아래와 같이 버튼이 있는 HTML 파일을 만듭니다.

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Button Test</title>
</head>
<body>
  <button id="clickMe">Click Me</button>
  <span id="message"></span>
  <script src="index.js"></script>
</body>
</html>

그런 다음, 다음과 같이 버튼의 클릭 이벤트를 처리하는 타입스크립트 파일을 작성합니다.

// index.ts
const button = document.getElementById('clickMe') as HTMLButtonElement;
const message = document.getElementById('message') as HTMLSpanElement;

button.addEventListener('click', () => {
  message.innerHTML = 'Button clicked!';
});

마지막으로, Jest를 사용하여 해당 클릭 이벤트를 테스트하는 코드를 작성합니다.

// index.test.ts
import '@testing-library/jest-dom/extend-expect';
import { fireEvent, render, screen } from '@testing-library/dom';
import './index';

test('버튼 클릭시 메시지가 변경되는지 테스트', () => {
  render(document.body.innerHTML);

  const button = screen.getByText('Click Me');
  const message = screen.getByRole('alert');

  expect(message).toHaveTextContent('');

  fireEvent.click(button);

  expect(message).toHaveTextContent('Button clicked!');
});

위의 코드를 실행하여 테스트를 수행하면, 해당 클릭 이벤트가 정상적으로 동작하는지 확인할 수 있습니다.

이렇게 타입스크립트와 Jest를 활용하여 버튼 클릭 이벤트를 테스트할 수 있습니다.

목차

도입

버튼 클릭 이벤트를 테스트하는 방법