Vitest: Fire Event와 User Event 라이브러리에 대해 알아보자

Fire Event

testing-library/react에 DOM요소에서 이벤트를 시뮬레이션하여 테스트할 수 있게 해주는 fireEvent가 있다. fireEvent의 경우에는 클릭, 입력, 포커스 등의 간단한 이벤트를 발생시켜 컴포넌트 동작을 테스트할 수 있다. 하지만 fireEvent의 경우 복잡한 상호작용을 시행하는 데에는 제한이 있어 User Event 라이브러리를 사용한다. 

 

Fire Event 사용하기

(1) @testing-library/react에서 fireEvent를 받아온다. 

import { fireEvent } from '@testing-library/react';

 

(2) fireEvent.이벤트(이벤트를 시행할 대상)으로 이벤트를 발생시킨다. 

    // 버튼 클릭 이벤트 발생
    fireEvent.click(button);

메서드	설명
mouseOver()	마우스 포인터를 특정 요소 위에 올린다.
mouseMove()	마우스 포인터가 특정 요소 위를 지나가거나 이동한다.
mouseDown()	마우스 버튼을 누른다.
focus()	요소에 포커스를 이동시킨다.
mouseUp()	마우스버튼에서 손을 뗀다.
click()	요소를 클릭한다.

 

<<전체 예제>>

//Comp1.jsx
import { useState } from 'react';

export default function Comp1(){
    const [text, setText] = useState("코딩쥐");
    const handleClick = () => {
        setText("codingji");
    }
    return(
        <div>
            <p>{text}</p>
            <button onClick={handleClick}>변경</button>
        </div>
    );
}

 

//Comp1.test.jsx
import { render, screen, fireEvent } from '@testing-library/react';
import Comp1 from './Comp1';

test('버튼 클릭 시 텍스트가 변경된다.', () => {
    render(<Comp1 />);

    const button = screen.getByRole('button', { name:/변경/i });
    const textElement = screen.getByText(/코딩쥐/i);

    // 초기 상태 확인
    expect(textElement).toBeInTheDocument();

    // 버튼 클릭 이벤트 발생
    fireEvent.click(button);

    // 변경된 상태 확인
    expect(screen.getByText(/codingji/i)).toBeInTheDocument();
});

---

User Event

위에서 설명했다시피 복잡한 상호작용을 테스트하기 위해서 만들어진 라이브러리다. userEvent의 경우에는 이벤트가 promise, 즉 이벤트가 비동기로 처리되기 때문에 async와 await를 사용해야한다. 

 

User Event 사용하기

(1) userEvent 설치하기

npm -D install @testing-library/user-event

 

(2) @testing-library/user-event에서 userEvent를 받아온다. 

import userEvent from "@testing-library/user-event"

 

(3) userEvent.이벤트(이벤트를 시행할 대상)으로 이벤트를 발생시킨다.  async/await를 사용하여 동기적으로 처리한다.

//Comp1.test.jsx
import { render, screen } from '@testing-library/react';
import { userEvent } from '@testing-library/user-event';
import Comp1 from './Comp1';

test('버튼 클릭 시 텍스트가 변경된다.', async () => {
    render(<Comp1 />);

    const button = screen.getByRole('button', { name:/변경/i });
    const textElement = screen.getByText(/코딩쥐/i);
    // 클릭했을 때 텍스트가 "codingji"로 변경된다.  
    await userEvent.click(button);
    expect(textElement).toHaveTextContent(/codingji/i);
});

 

예제에서는 userEvent를 한개만 작성하였지만 여러 개의 이벤트를 await를 통해서 순서대로 발생할 수 있다. 예를 들어서 버튼을 클릭하고, 요소 위에 마우스를 올리고 엔터를 입력하는 이벤트를 시행하고 싶으면 아래처럼 작성하면 된다. 

test('버튼 클릭 시 텍스트가 변경된다.', async () => {
    render(<Comp1 />);
    const button = screen.getByRole('button', { name:/변경/i });
    const textElement = screen.getByText(/코딩쥐/i);
    
    await userEvent.click(button);
    await userEvent.hover(textElement);
    await userEvent.keyboard('{Enter}');
    
    expect(textElement).toHaveTextContent(/codingji/i);
});

 

메서드	설명
click()	요소를 클릭한다.
type()	입력 필드에 텍스트를 입력한다.
dblClick()	요소를 더블 클릭한다.
selectOptions()	드롭다운에서 옵션을 선택한다.
deselectOptions()	드롭다운에서 선택된 옵션을 해제한다.
upload()	파일을 업로드한다.
clear()	입력 필드의 내용을 지운다.
hover()	요소 위에 마우스를 올린다.
unhover()	요소에서 마우스를 내린다.
tab()	탭 키를 눌러 포커스를 이동한다.
keyboard()	키보드 입력을 시뮬레이션한다.