-
[Testing-library] render.. ? append?Eureka! 2022. 3. 30. 22:33
오늘은 회사에서 테스트 관련해서 대화를 나누고 있었어요.
팀원: 저희 테스팅 라이브러리 제약사항 있나요?
저: 없는데요.. 만약 더 나은게 있으면 추가하면 됩니다. 왜용?
팀원: 아.. enzyme 쓰고 싶어지네요
저: ?? ??상황은 이러했다..
// 만약 jest + enzyme 조합이었다면? describe('SomeComponent test', () => { let component const setup = (val) => { component = mount<SomeComponent value={val} /> // <div>{value}</div> } beforeEach(() => { setup() } afterEach(() => {component = null}) it('default', () => { expect(component.text()).toBe(expected_val) // val 확인했다. setup(val2) // 새로운 무언갈 넘겼다. expect(component.text()).toBe(expected_val2) // val2 확인했다. }) })팀원의 말은 이러했다. 만약 enzyme 이라면 위와 같이 자연스러운 흐름을 확인할 수 있다 왜?
setup 에서 당연히 component 에 새로운 SomeComponent 을 할당하였으니까.근데 testing-library 의 render 가 이상했다.
저런식으로 하였을 경우<body> <div>val1</div> <div>val2</div> </body>어라?? 왜 ?? 새로 할당이 아니라 append지?
둘은 의문을 갖고 render 를 찾아봤다.어??
Render into a container which is appended to document.body.document.body에 추가된 컨테이너로 렌더링합니다
append라고??
여기서 의문이 생겼다
그럼 cleanup도 해줘야하는거 아니야 테스트에 대해서? 왜 안해주지?하나하나 확인을 해봤보았다.
아?
Please note that this is done automatically if the testing framework you're using supports the afterEach global and it is injected to your testing environment (like mocha, Jest, and Jasmine). If not, you will need to do manual cleanups after each test.사용하고 있는 테스트 프레임워크가 각 글로벌을 지원하여 테스트 환경(mocha, Jest, Jasmine 등)에 주입된 경우 이 작업은 자동으로 수행됩니다. 그렇지 않은 경우 각 테스트 후 수동 청소를 수행해야 합니다.아!!!
우리가 한 테스트 내에서 새로운 렌더를 수행했기 때문에 정상적으로 cleanup이 되지 않았구나.
서로 깨달음을 얻었다.
왜 이렇게 구현이 되었을까에 대한 의문을 남긴채조금 더 테스트를 명확하게 구분하여 짜기로 대화를 마쳤다.
혹시 같은 고민을 하는 분이 계실까하여 유레카에 남긴다.
'Eureka!' 카테고리의 다른 글
Volta??? (0) 2023.10.05 [ES6] const ? 불변아니였어? (0) 2019.10.31 Array 채우기와 랜덤 추출! (0) 2019.10.28 var vs. let vs. const ? (0) 2019.10.01