Jest를 이용한 Reducer 테스트

이번에는 Jest를 이용한 Reducer 테스트에 대해 포스팅해보려 합니다.

다만, 테스트를 위한 세팅에 대해서는 따로 설명하지 않을 예정이니 이 점 참고 부탁드립니다.

내용이 간단하여 어려운 점은 없을 것 같습니다 :D

 

 

원칙

https://redux.js.org/recipes/writing-tests/#reducers

Redux

"리듀서는 액션을 이전의 상태에 적용한 후 새로운 상태를 반환해야 한다."

 

함수의 유닛 테스트와 같이 state와 action만 테스트 케이스에 따라 넘겨주고, 변경된 알맞은 값을 반환하는지, 그에 맞게 상태를 잘 변경하는지에 대해 테스트 코드를 작성하면 됩니다.

 

 

예시

 

 

 

다만 A 부분에서 현재 액션 생성 함수에 대한 테스트도 진행하고 있는데, 이미 redux-actions를 사용하고 있기 때문에 해당 라이브러리를 믿고 오히려 테스트 케이스를 작성하지 않는 것도 하나의 방법이 될 수 있을 것 같습니다.

 

 

redux-mock-store를 활용하여 개선해보기

https://github.com/dmitry-zaets/redux-mock-store

dmitry-zaets/redux-mock-store

redux-mock-store는 리덕스의 비동기 액션 생성자와 미들웨어의 테스트를 위한 Mock Store입니다.

위에 링크로 걸어둔 redux.js.org에서도 async action creators에 대한 테스트를 진행할 때 해당 라이브러리를 사용하고 있는 모습을 확인하실 수 있습니다.

 

실제 공식 예제에서 볼 수 있듯이, (Synchronous actions)

 

 

addTodo 액션이 올바른 payload를 반환하는지에 대한 테스트를 진행하는 것을 볼 수 있습니다.

 

* redux-mock-store는 상태를 업데이트 하지 않고 디스패치에 전달된 작업만 기록하기 때문에, store.dispatch() 구문 실행 후 store.getState()로 변경된 상태를 확인하는 것이 불가능합니다.

해당 라이브러리가 리듀서 관련 로직이 아닌 액션 관련 로직을 테스트하도록 설계되었기 때문에 이는 어쩔 수 없는 부분이 아닌가 생각합니다.

 

다만, 액션과 리듀서를 결합한 복잡한 테스트의 경우 "redux-actions-assertions"를 참고할 수 있다고 하는데 실제로 사용해 본 적이 없어 설명은 어려울 것 같습니다.. : (

 

어쨌든, 위의 food.test.ts 테스트 코드 중

 

 

해당 부분을 redux-mock-store를 활용하여 아래와 같이 개선이 가능합니다.

 

 

설명

A

실제 redux에서 configureStore함수는 reducer와 store를 연결하고자 할 때 사용합니다.

해당 코드의 역할 역시 동일합니다.

 

B

기존에는 action creator와 reducer에 대한 테스트 코드가 같은 describe 내에 존재하였습니다.

성격이 다른 케이스들을 분리하는 것이 추후 유지보수를 하기에도 편리할 것 같아 describe 역시 분리하여 테스트 코드를 작성하였습니다.

 

C

공식 레포의 예제와 같이 saveFood 작업이 올바른 payload를 반환하는지 테스트합니다.

store.dispatch() 구문을 실행할 때의 action은 인스턴스 내부 배열에 저장되어 실행되기 때문에 getActions() 역시 배열을 반환합니다.

따라서 toEqual Matcher를 사용해 값을 비교하였습니다.

 

D

저장된 액션들을 초기화하는 역할을 합니다.

store.getActions() 구문에 대해 각각 비교하는 것이 나을 것 같아 해당 코드를 추가하였습니다.

 

 

결과

테스트 커버리지

 

마치며

Reducer가 순수 함수이기 때문에 테스트 코드를 작성하기 훨씬 수월했던 것 같습니다.

앞으로는 이런저런 테스트 코드 작성 방법과 예제들에 대한 포스팅도 진행해 볼 생각입니다.

수정되어야 할 부분이 있으면 언제든 코멘트로 남겨주세요 :D