[Testing-libarary] Modal open 확인 테스트 코드 작성 시 주의사항

open modal 버튼을 클릭 시 Modal Component가 렌더링 된다고 할 때 click 함수를 어떤걸 사용할지에 따라 테스트코드는 다음과 같이 작성할 수 있다.

 

1. fireEvent.click을 사용할 경우

it("부모 컴포넌트 state를 이용한 모달 버튼을 클릭하면 모달이 나타난다", () => {
    renderComponent();
    //모달이 처음에는 보이지 않는다
    expect(screen.queryByText("모달 타이틀")).toBeNull();

    //버튼 클릭 시 모달 등장
    const buttons = screen.getAllByText("open modal");
    fireEvent.click(buttons[0]);
    //모달 등장
    const modal = screen.getByTestId("modal");
    expect(modal).toBeInTheDocument();
  });

fireEvent.click은 단순히 DOM 이벤트를 발생시키는 것으로 컴포넌트에서 이벤트를 처리하는데 문제가 없다면 잘 작동한다.

console.log(fireEvent.click(buttons[0]));

console.log로 찍어보면 아래와 같이 boolean으로 리턴되는것을 확인할 수 있다.

실제로 fireEvent 내부를 확인해보면 다음과 같이 타입이 정해져있다.

fireEvent 내부

console.log(fireEvent.click(buttons[0]));

2. userEvent.click을 사용할 경우

it("부모 컴포넌트 state를 이용한 모달 버튼을 클릭하면 모달이 나타난다", async () => {
    renderComponent();
    //모달이 처음에는 보이지 않는다
    expect(screen.queryByText("모달 타이틀")).toBeNull();

    //버튼 클릭 시 모달 등장
    const buttons = screen.getAllByText("open modal");
    await userEvent.click(buttons[0]);
    //모달 등장
    const modal = screen.getByTestId("modal");
    expect(modal).toBeInTheDocument();
  });

userEvent를 사용하기 위해서는 npm 설치를 해야한다. (npm install --save-dev @testing-library/user-event)

userEvent.click은 실제 유저가 클릭하는 것과 비슷한 방식으로 동작한다.

그런데 여기서 주의해야할 점은 userEvent.click의 리턴값은 Promise라는것이다.

따라서, async await을 걸어줘야한다. 그렇지 않으면 Promise Pending상태가 되어 뒤에 작성된 모달 등장 로직이 제대로 작동하지 않는다.

console.log(userEvent.click(buttons[0]));

console.log를 찍어보면 아래와 같이 Promise <pending>을 반환되는것을 확인할 수 있으며

실제로 userEvent 내부를 확인해보면 타입이 Promise로 정의되어있다.

userEvent.click 내부

console.log(userEvent.click(buttons[0]));

 

Promise 반환인지 모르고 userEvent는 테스트 통과가 안되길래 이것 저것 삽질을 좀 했다..