inflearn logo
강의

Course

Instructor

Learning React A-Z by Following Along [Version 19 반영]

Disable the button when the on/off button is clicked.

마이너스버튼 테스트

276

leeyoungyu646175

4 asked

0

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 소프트웨어-테스트

Answer 2

0

John Ahn

안녕하세요.

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

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

감사합니다.

0

communityai8509

안녕하세요, 인프런 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();
});

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

강의 소스 코드 압축 풀기 오류

0

67

1

런타임 에러 ㅠㅠ

0

82

1

강의대로 따라갔는데 에러보다 api키로 들어간 넷플릭스? 그런게 렌더링 되지 않습니다 ㅠ

0

98

1

안녕하세요 개발과 상관없는 질문입니다만

0

109

1

리액트 라우터 관련

0

99

1

react-beatiful-dnd에서 문제가 발생합니다.

0

101

1

react19에서는 react-beautiful-dnd가 설치되지 않습니다.

0

800

1

useEffect로 사용을 해도 되나요?

0

196

1

넷플릭스 오리지널 제외하고 슬라이드가 동작을 안합니다.

0

190

1

react 19의 useActionState가 더이상 isPending은 지원하지 않는 듯합니다

0

275

2

리액트 dockderfile 작성 시 COPY 질문

0

143

1

next.js에서부터는 react query 필요없는지

0

318

1

기능

0

191

1

오류가 안보여요

0

191

1

CSS

0

215

1

local storage

0

207

1

list컴포넌트 생성하기

0

220

1

검색어 입력 후 초기화하는 방법 궁금합니다!

0

329

1

Banner.css에 대해서

0

442

1

플러그인이 추천을 안해줍니다

0

318

1

리액트 서버 실행 오류

0

1146

2

오류메세지는 확인했는데 어떻게 고쳐야 할지 모르겠습니다 ㅠ

0

296

1

creactStore질문이요

1

279

2

중첩 라우트

0

173

1