개발자

vitest toHaveStyle

2024년 04월 17일조회 61

Input 컴포넌트를 클릭 했을 때, border-color가 제대로 변경되는지 확인하는 테스트 코드를 작성하고 있습니다. Input이 Focus 되었을 때 사진과 같이 border-color가 #3182ce로 변경되는데 테스트 코드 상에서는 에러가 발생합니다. expect($input).toHaveStyle({ borderColor: '', }); 이런 식으로 작성했을 땐 통과가 되는데 #3182ce 값으로 변경됐는지 확인 할 수 있도록 테스트 코드를 작성하는 방법이 있을까요?

1it('focus test', async () => {
2  const { user } = await render(<InputInjected placeholder="아이디를 입력해 주세요." name="input" />);
3  const $input = screen.getByPlaceholderText('아이디를 입력해 주세요.');
4  expect($input).toHaveStyle({
5    borderColor: 'var(--border-color-light)',
6  });
7  await user.click($input);
8  expect($input).toHaveStyle({
9    borderColor: '#3182ce',
10  });
11  screen.debug();
12});
이 질문이 도움이 되었나요?
'추천해요' 버튼을 누르면 좋은 질문이 더 많은 사람에게 노출될 수 있어요. '보충이 필요해요' 버튼을 누르면 질문자에게 질문 내용 보충을 요청하는 알림이 가요.
profile picture
익명님의 질문

답변 0

답변이 없을 때 보이는 아이콘

첫 답변을 기다리고 있어요.

지금 가입하면 모든 질문의 답변을 볼 수 있어요!

현직자들의 명쾌한 답변을 얻을 수 있어요.

또는

이미 회원이신가요?

AI 답변
커리어리 AI 봇 프로필 이미지

커리어리 AI 봇

GPT가 달아주는 답변입니다.

2024년 04월 17일

답변에 앞서, vitest에 toHaveStyle이 정상적으로 동작하는지 확인해야 합니다. 또한, 실제로 border-color가 변경되었는지 직접적으로 적용하여 시각적으로 확인해 보시는 것이 중요합니다. 그러나 지금 주어진 정보를 기반으로 한다면, 테스트 코드를 다음과 같이 조정하면 원하는 결과를 얻을 수 있을 것 같습니다. ```typescript it('focus test', async () => { const { user } = await render(<InputInjected placeholder="아이디를 입력해 주세요." name="input" />); const $input = screen.getByPlaceholderText('아이디를 입력해 주세요.'); // Focus 전 스타일 확인 expect($input).toHaveStyle(` border-color: var(--border-color-light); `); // Input에 클릭 이벤트 발생 user.click($input); // 에러 대신 null 리턴을 위한 waitFor 사용 await waitFor(() => { expect($input).toHaveStyle(` border-color: #3182ce; `); }); screen.debug(); }); ``` 위 코드에서 사용된 'waitFor'는 비동기 테스트 패턴입니다. 이 방식은 비동기 업데이트가 일어날 때까지 기다리도록 해주어 테스트의 안정성을 향상시킵니다. 위 코드는 요소의 스타일 변화에 유연하게 반응하도록 작성되어 있으며, 다양한 상황에서 적용 가능합니다. 단, 이 코드가 정상적으로 작동하기 위해서는 사전에 jest를 설정해주어야 합니다. 'jest-dom/extend-expect' 라이브러리를 설치하고 jest 설정 파일에 아래 코드를 추가한다면 'toHaveStyle' 메소드를 사용할 수 있습니다. ```javascript import '@testing-library/jest-dom/extend-expect'; ``` 위 코드를 실행한 후, 테스트 결과가 여전히 실패한다면 문제는 다른 곳에 있을 수 있으므로 CSS or DOM 업데이트와 관련된 추가적인 디버깅이 필요할 것입니다.

목록으로

지금 가입하면 모든 질문의 답변을 볼 수 있어요!