인프런 커뮤니티 질문&답변
작성한 질문수
ProductFilter test 어떤 방식이 더 선호되는 방식일까요?
작성
·
57
0
it('최소 가격 또는 최대 가격을 수정하면 setMinPrice과 setMaxPrice 액션이 호출된다.', async () => {
const { user } = await render(<ProductFilter />);
const minPriceInput = screen.getByPlaceholderText('최소 금액');
const maxPriceInput = screen.getByPlaceholderText('최대 금액');
await user.type(minPriceInput, '10');
await user.type(maxPriceInput, '10000');
expect(setMinPriceFn).toHaveBeenCalledWith('10');
expect(setMaxPriceFn).toHaveBeenCalledWith('10000');
});
전 이런식으로 작성했습니다.
단위 테스트에서 알려주신 AAA패턴을 해당 통합테스트에서도 적용하면 깔끔할 것 같아서 이렇게 작성했어요.
어차피 검증할건 setMaxPriceFn & setMinPriceFn이 호출됐는지 여부라 최소금액 및 최대금액 인풋을 연속적으로 조작하게 했습니다.
혹시 이렇게 하면 문제가 있는지 궁금합니다
답변 2
0
안녕하세요!
크게 검증하는 내용은 달라지지 않을 것 같습니다. 연속적으로 입력을 하더라도 실제 구현적인 관점에서 달라지는 부분은 없으니까요. 만약 순서를 변경하는것으로 개선을 도모하셨다면 두 테스트를 나눠서 작성하는 것도 좋을 것 같습니다 ㅎㅎ 말씀해주신 패턴대로 적용도 가능하고 각 검증 범위를 나눠 테스트 케이스를 작성했기 때문에 실패했을 때 어느 부분에서 문제가 발생했는지 훨씬 더 쉽게 알 수 있을 것 같아요!
it('최소 가격을 수정하면 setMinPrice가 호출된다.',
it('최대 가격을 수정하면 setMaxPrice가 호출된다.',
0
안녕하세요, 인프런 AI 인턴입니다.
윤상님의 질문에 대해 “통합 테스트 작성 방식에 대해 궁금한 점이 있습니다“라는 게시물에서 비슷한 논의가 있었습니다. 특히, 내부 구현에 대한 의존도와 테스트가 사용자의 경험에 초점을 맞추어야 하는지에 대한 점검을 포함하고 있습니다.
윤상님의 경우, setMinPriceFn과 setMaxPriceFn의 호출 여부를 검증하는 접근 방식은 특정 액션의 결과에 초점을 맞춘 테스트로 볼 수 있습니다. 이는 구현에 의존적인 면이 있으나, 중요 비즈니스 로직이나 사용자 인터랙션의 중요한 부분을 검증하는 데 필요할 수 있습니다. 그러나 테스트는 사용자의 관점에서 목표하는 바를 이해하고 해당 목표를 달성하는 기능이 제대로 작동하는지 확인하는 데 중점을 두는 것이 좋습니다. 구현이 변경될 때마다 해당 테스트 역시 업데이트가 필요할 수 있습니다.
통합 테스트에서는 가능한 한 사용자 경험에 더 가까운 시나리오를 테스트하는 것이 전반적인 애플리케이션의 고품질을 보장하는 데 도움이 됩니다. 따라서, 액션이 호출되었는지를 직접적으로 확인하는 대신, 액션 호출의 결과로 사용자 인터페이스에 어떤 변화가 일어나는지를 확인하는 접근 방식을 고려해 보시는 것도 좋을 것 같습니다.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.