toHaveStyle 메서드 사용이 조금 이상한 것 같습니다.

실무에 바로 적용하는 프런트엔드 테스트 - 1부. 테스트 기초: 단위・통합 테스트

2.4. React Testing Library와 컴포넌트 테스트

작성

수정됨

it('focus가 활성화되면 border 스타일이 추가된다.', async () => {
  const { user } = await render(<TextField />);

  const textInput = screen.getByPlaceholderText('텍스트를 입력해 주세요.');

  //await user.click(textInput);

  expect(textInput).toHaveStyle({
    borderWidth: 'px',
    borderColor: 'rbg(25,a118,210)',
  });
});

(1) user.click(textInput)을 주석 처리 했습니다.

그리고

(2) toHaveStyle 부분에서,

borderWidth, borderColor 두 값을 위와 같이 넣었는데도 테스트가 아래처럼 통과합니다.

수업 노트에 적혀진 이슈 (링크)의 내용대로 "1px"이라고 작성하면 test가 fail이 됩니다.

혹시 제가 잘 못 이해한 부분이 있는걸까요?

javascript react 소프트웨어-테스트 vitest

답변 2

코드 조커, 오프

지식공유자

안녕하세요.

우선 관련해서 올려주신 toHaveStyle 어설션은 px뿐만 아니라 이전 이슈에 올라왔던 1 처럼 유효하지 않은 값들은 비교상에서 없는 값으로 인식되어 비교가 올바르게 되지 않고 통과되는 것으로 보입니다.

textInput에 존재하는 모든 스타일을 입력해야만 비교가 가능한 것이 아니라 partial 매칭 방식이기 때문에 다음과 같은 구현 방식을 따르지 않았나 싶습니다.

올바르게 비교하기 위해서는 스타일에 따른 올바른 양식의 값을 입력해주시면 될 것 같습니다~

박상원

질문자

답변 감사드립니다.

말씀주신대로 올바른 양식을 넣으니, 그제서야 테스트가 의도한대로 동작하네요.

인프런 AI 인턴

안녕하세요, 인프런 AI 인턴입니다. 박상원님.

제공해주신 정보를 바탕으로 toHaveStyle 메서드 사용에 대한 귀하의 질문에 답하고자 합니다.

toHaveStyle 메서드는 요소의 스타일을 검증하는 데 사용됩니다. 이 메서드는 지정된 스타일 속성이 해당 요소에 적용되었는지 여부를 판별합니다. 테스트 코드에서 toHaveStyle 메서드를 사용하여 요소의 스타일을 검증할 때, 스타일 속성과 값들을 정확하게 지정해야 합니다.

귀하의 코드에서 주석 처리한 await user.click(textInput); 부분은 textInput에 대한 사용자의 클릭을 시뮬레이션하며, 이 작업을 주석 처리하면 코드에 의도된 대로 포커스 스타일의 변경이 일어나지 않을 수도 있습니다.

또한 toHaveStyle에서 borderWidth와 borderColor 값을 잘못 지정한 것으로 보입니다. borderColor의 경우 올바른 RGB 값의 형식은 rgb(25, 118, 210)이며, borderWidth에도 단위를 포함한 정확한 값(예: '1px')을 제공해야 합니다.

관련하여, 유사한 문제를 다루는 2.4장 마지막 border 스타일 검증 시 질문에서는 toHaveStyle 메서드를 사용할 때, 스타일 속성 값에 단위를 포함하여 정확히 지정해야 한다는 점이 강조되었습니다.

테스트 코드에서 정확한 스타일 속성 값을 사용함으로써 기대한 동작(테스트 실패 또는 성공)를 보장할 수 있습니다. 따라서 toHaveStyle 사용 시 스타일 속성과 값들을 정확히 지정해 주시기 바랍니다.

이와 같은 상황에서 수정이 필요한 코드는 다음과 같습니다:

expect(textInput).toHaveStyle({
  borderWidth: '1px', // 'px'단위 추가
  borderColor: 'rgb(25, 118, 210)', // 올바른 RGB 형식
});

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

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

toHaveStyle 메서드 사용이 조금 이상한 것 같습니다.