테스트 라이브러리와 함께 적용되지 않는 SFC 스타일

테스트 라이브러리와 함께 적용되지 않는 SFC 스타일

나는 우리의 vue 코드베이스에 단위 테스트를 추가하고 요소 가시성을 테스트하는 것이 어렵다는 것을 알아내고 있다.

테스트 라이브러리 설명서의 예에서 권장하는 대로 평상시와 같이 구성요소를 렌더링하지만 스타일이 DOM 디버깅(screen.debug 사용)에 적용되지 않는다.단서라도 있어?

예:

구성 요소 내부

<template>
  <span class="error-message>content here</span>
</template>
<style lang="scss" scoped>
.error-message {
  display: none
}

(실패) 테스트 파일에서:

render(Component);
expect(screen.getByText(/content here/i)).not.toBeVisible();
screen.debug();

요소가 보이므로 테스트가 실패한다.디버그는 브라우저 검사에서 일반적으로 볼 수 있는 데이터 v-* 클래스를 제외하고 예상대로 DOM을 인쇄한다.

나는 결국 주장이 나오는 방식을 바꾸게 되었다.내가 알기로는 수업을 통해 적용되고 있는 스타일들이야.error-message시험 환경에서 DOM의 헤더에 주입되지 않기 때문에 농담으로 볼 수 없다.그래서 내가 한 일은 원소의 계급 이름을 주장하는 것이었다.

참조URL: https://stackoverflow.com/questions/66535843/sfc-styles-not-being-applied-with-testing-library