프론트엔드 테스트에서의 정규식의 활용
May 17, 2023
이슈
component test를 하다보면 렌더링된 결과물을 비교하는데, 텍스트가 길어져서 line break가 발생하거나, 의도치 않은 공백이 생기는 등의 상황에서 텍스트 단언문에서 애를 먹는다. 이럴 때 정규식을 사용해 공백을 제거하면 수월하게 테스트할 수 있다!
const str = ' This is a test. '
const result = str.replace(/\\s\\s+/g, ' ')
console.log(result) // Output: "This is a test."// mount한 결과물의 text가 아래와 같이 나올 때
// ' This is a test. ';
const wrapper = mount(component, ...);
expect(wrapper.element.textContent.replace(/\\s\\s+/g, ' ')).toContain('This is a test.');정규식 해석
.replace(/\\s\\s+/g, ' ')
- 스페이스, 탭, 라인브레이크 등을 하나의 스페이스로 치환해준다.
/\\s\\s+/는 여러개의 white space character를 뜻한다- 맨 뒤의 ‘g’는 글로벌 적용을 의미한다.(한번 패턴을 마주하면 적용하고 끝이 아니라 문자열 끝까지 검사함)
