vitest toHaveStyle

답변에 앞서, 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 업데이트와 관련된 추가적인 디버깅이 필요할 것입니다.