Frontend TDD와 친해지기(1) - style 테스트는 도대체 어떻게?

들어가며

프론트 TDD 관련해서 학습 중인데, 진행 중인 프로젝트에서 style을 다뤄야했다.
이래저래 삽질을 많이 했는데(^^) 그 과정을 간략하게 기록하고자 한다.

---

참고: 현재 jest + enzyme 의 조합을 사용 중임

1. jest-styled-components 활용하려 했으나,
https://github.com/styled-components/jest-styled-components

styled-components/jest-styled-components

2. 'No style rules found on passed Component' 에러 발생 → 해결 못함...
github.com/styled-components/jest-styled-components/issues/234

No style rules found on passed Component - Enzyme - styled() · Issue #234 · styled-components/jest-styled-components

3. toHaveProperty 활용해보려 했으나, → 안됨
https://stackoverflow.com/questions/40795850/how-to-test-style-for-a-react-component-attribute-with-enzyme

How to test style for a React component attribute with Enzyme

4. 결국 직접 Element에 접근(styled-components에서 스타일 지정) → 어찌어찌 Pass는 했으나 매우 맘에 안듦

console.log(wrapper.find(CustomImageContainer).children().getElement());

const Image = wrapper.find(CustomImageContainer).children().getElement().type['componentStyle']['rules'];

expect(Image.toString()).toMatch(`border-radius: ,${BorderRadius.SQUARE},px`);  
// styled-component를 활용해서 스타일을 지정하니 앞뒤로 ,가 붙더라

5. Element의 props 활용(스타일 지정을 inline 형식으로 변경) → 그나마 낫군...

const Image = wrapper.find(CustomImageContainer).childAt(0).getElement().props.style;

expect(Image.borderRadius).toMatch(`${BorderRadius.SQUARE}%`);

 

---

결론

해당 컴퍼넌트의 style을 inline 형식으로 지정하여 .getElement().props.style로 접근한다.

<!-- 컴퍼넌트의 return문 -->
<CustomImageContainer>
    <CustomImage style={{ borderRadius: `${borderRadius}%` }}></CustomImage>
</CustomImageContainer>

// 테스트 코드
let wrapper = shallow(<ImageEditor />);
wrapper.find(BorderRadiusBtnContainer).childAt(0).simulate('click');

const Image = wrapper.find(CustomImageContainer).childAt(0).getElement().props.style;

expect(Image.borderRadius).toMatch(`${BorderRadius.SQUARE}%`);