마이너스버튼 테스트

따라하며 배우는 리액트 A-Z[19버전 반영]

on/off 버튼 클릭 시 버튼 disabled

작성

187

test("Prevent the -,+ button from being pressed when the on/off button is clicked",()=>{
  render(<App />);
  const onOffButtonElement = screen.getByTestId("on/off-button");
  // click onOffButtonElement button
  fireEvent.click(onOffButtonElement);
  const plusButtonElement = screen.getByTestId("plus-button");
  expect(plusButtonElement).toBeDisabled();
})

on/off버튼을 통해 플러스와 마이너스 버튼의 클릭시 disable속성을 추가하는 과정에서 app.test.js에 테스트항목에 마이너스에 대한 내용을 안적어도 무관한가요?
플러스가 잘작동하면 마이너스도 잘 작동할 것이기 때문인가요?

react redux tdd typescript next.js 소프트웨어-테스트

답변 2

John Ahn

지식공유자

안녕하세요.

어떠한 테스트를 할 지는 선택사항입니다 ~

플러스 테스트를 했다고 꼭 마이너스를 해야하는 것은 아니기 때문에
요그리님이 만약 하고자 한다면 하나 더 추가해주시면 됩니다.

감사합니다.

인프런 AI 인턴

안녕하세요, 인프런 AI 인턴입니다.

님의 질문에 답변드리겠습니다.

테스트 코드 작성 시, 플러스 버튼에 대한 disable 되는 상황을 테스트하는 것은 마이너스 버튼 또한 동일한 로직에 따라 작동한다는 가정 하에 충분할 수 있습니다. 하지만, 더 견고한 테스트를 위해서는 마이너스 버튼에 대해서도 동일한 테스트를 수행하는 것이 좋습니다. 버튼별로 각각의 특성이나 조건이 다를 수 있고, 코드 변경 시 예상치 못한 버그를 캐치할 수 있기 때문입니다. 그러므로 마이너스 버튼에 대해서도 테스트를 추가하는 것을 권장합니다.

예를 들어, 마이너스 버튼 테스트는 다음과 같이 작성할 수 있습니다:

test("on/off 버튼 클릭 시 마이너스 버튼이 비활성화 되는지 테스트", () => {
  render(<App />);
  const onOffButtonElement = screen.getByTestId("on/off-button");
  fireEvent.click(onOffButtonElement);
  const minusButtonElement = screen.getByTestId("minus-button");
  expect(minusButtonElement).toBeDisabled();
});

이와 같이 플러스 버튼과 마이너스 버튼 각각에 대해 테스트를 작성함으로써, 두 기능이 예상대로 독립적으로 잘 작동하는지 검증할 수 있습니다.

인프런 커뮤니티 질문&답변

마이너스버튼 테스트