바닐라 JS 클라이언트 테스트하기 (with jest-environment-jsdom)

지금까지 테스트를 작성하려고 노력은 했지만 돌이켜보니 클라이언트 코드에서는 한번도 테스트코드를 작성한 적이 없었다.

유지보수하기 좋은 코드를 쓰려면 테스트코드는 필수라고 생각한다.

문제점

내가 사용하는 jest는 node환경에서 돌아간다.

브라우저와 node환경은 다르다.

여기서 문제가 되는 부분은 node에는 DOM객체와 API가 없다는 것이다.

 

이걸 어떻게 사용해볼까? 고민을 했다.

서치 결과가 대부분 리액트에서 테스트하는 방법이라는 문제가 있어서 좀 더 오래 걸린 것 같다.

 

jsdom

jsdom은 이전 RSS파싱을 통한 블로그 피드 제작에 썼던 라이브러리라 사용방법을 알고있었다. 

nodejs환경에서 DOM요소를 건드릴 수 있게 해준다.

https://www.npmjs.com/package/jsdom

jsdom

이걸 써볼까? 했었는데 외부 라이브러리를 다운받아서 쓰는게 맞나? 라는 고민때문에 다른 것들도 찾아보려고 했다.

 

 

jest-dom

https://testing-library.com/docs/ecosystem-jest-dom/

jest-dom | Testing Library

testing-libarary에 jest-dom이라는게 있다는것을 알게되어 이걸써볼까 하기도 했다.

그러던중 공식문서에서 답을 찾았다...

왜 나는 공식문서를 안읽는가...

 

 

jest-environment-jsdom

https://jestjs.io/docs/next/tutorial-jquery

DOM Manipulation · Jest

요걸 사용하면 DOM api를 그대로 쓸수있다!

 

비교

jsdom : 외부 라이브러리를 테스트코드에서 쓰는건 아닌 것 같음

@testing-libaray/jest-dom : jest-environment-jsdom에 뭔가 더 끼얹어서 쓰는 느낌인 것 같음

jest-environment-jsdom : jest 공식문서에 적혀있음

비교도 해보았다.

 

결론

jest-environment-jsdom으로 환경을 구성하고, 이후에 뭔가 한계, 문제상황이 생기면 testing-libarary로 문제를 보완해나가보자

 

trouble shooting

이렇게 작성하고 했더니 제대로 작동하지 않는 문제가 있었다.

jest.config.js에서 설정을 해줘야하나보다.

 

jest.config.js

export default {
  testEnvironment: 'jsdom',
};

이렇게 설정해주었다.(esm으로 모듈을 설정했다.)

 

태스트 환경 구성 완료!