Gatsby Unit Test Setting

Gatsby를 활용해 블로그 작업을 하면서 UnitTest도 작성해야겠다라는 생각이 들었다.

첫 번째 이유:

회사 프로젝트에 cypress를 적용해 e2e 테스팅을 진행하고 있다.

E2E 테스팅을 진행하면서 서버와 통신을 하는 경우가 많아 서버에 문제가 생기면 전체 테스트 프로세스가 실패하는 경우가 있어 부정적인 의견들이 있었다.

두 번째 이유:

단순히 개인적으로 unit test에 대한 관심과 프로젝트에 적용하기 위해서는 연습과 활용 방법을 터득할 필요가 있다고 생각했다ㅎㅎ

Gatsby는 자체 Babel 구성을 사용하기 떄문에 jest가 babel-jest를 사용하도록 수동으로 설정해줘야된다. 설정하는 제일 쉬운 방법은 jest.config.js 를 설정하는 것이다. (root 경로에 생성)

jest.config.js 의 transform는 jest-preprocess.js를 통해 진행이 된다.

주로 jest가 처리할 수 없는 static file imports를 mocking 한다.

identity-obj-proxy 의 경우 stylesheets를 mocking하는데 사용된다.

file-mock.js 의 경우 모든 assets들을 mocking하는데 사용하며, root 경로에 파일을 생성한다.

setupFiles에는 모든 test가 실행되기 전 포함될 파일들을 나열한다.

loadershim.js에는 다음과 같이 되어 있다.

먼저 아래 패키지들을 설치한다

root 경로에 setup-test-env.js를 생성한 뒤 아래와 같이 입력

그 다음 jest.config.js 에 다음 설정들을 추가한다

설정을 완료 했다면 다음과 같이 test 파일을 작성한 뒤 실행하면 된다.