[react-testing-library] 유저 이벤트

🎯 유저 이벤트

📝 user-event

• 내장 이벤트 함수인 fireEvent, createEvent를 좀 더 직관적이고 범용적으로 사용할 수 있도록 만든 라이브러리
• click, type, keyboard, upload, hover, tab 등 유저가 실제로 웹페이지를 사용하며 만드는 이벤트를 메서드로 제공한다.

 

📝 user-event - click

import userEvent from "@testing-library/user-event";
import { render } from "@testing-library/react";
 
userEvent.click(submitButton)
userEvent.click(submitButton, { shiftKey: true })
userEvent.click(submitButton, { shiftKey: true }, { clickCount: 5 })
test('숨은 텍스트를 보여준다.', () => {
    const text = "Hidden text!";
 
    const { getByRole, queryByText } = render(<Expansion text={text} />);
    expect(queryByText("Hidden text!")).toBe(null);
 
    const showButton = getByRole("button", { name: "Expand" });
    expect(showButton).toBeInTheDocument();
 
    userEvent.click(showButton);
    expect(queryByText(text)).toBeInTheDocument();
})

• 먼저 테스트 코드를 작성해준다.

 

function Expansion({ text }) {
    const [expanded, setExpanded] = useState(false);
 
    return (
        <div>
            <button onClick={() => setExpanded((b) => !b)}>Expand</button>
            {expanded && <div>{text}</div>}
        </div>
    );
}

• 테스트 코드를 기반으로 컴포넌트 코드 작성

 

📝 user-event - type

import userEvent from "@testing-library/user-event";
import { render } from "@testing-library/react";
 
userEvent.type(inputElement, 'react advanced')
userEvent.type(inputElement, 'react{space}advanced{enter}')
await userEvent.type(inputElement, 'react advanced', { delay: 300 })
test("Typeahead에서 쿼리에 따른 검색 결과를 보인다", () => {
    const mockSearchData = ["kim", "song", "shim", "park", "yoon"];
    const { getByPlaceholderText, getAllByRole } = render(
        <Typeahead searchData={mockSearchData} />
    );
 
    const inputElement = getByPlaceholderText("Type name...");
    userEvent.type(inputElement, "s"); // s 입력
 
    expect(getAllByRole("listitem").length).toBe(2); // 2개의 결과가 나온다면
 
    userEvent.clear(inputElement);
    expect(getAllByRole("listitem").length).toBe(mockSearchData.length);
});

• userEvent.type()을 이용하면 타이핑, 즉 값을 입력할 수 있다.