관리 메뉴

프론트엔드 정복하기

React-Testing-Library에서 목업 활용법(useSelector 등을 Mock) 본문

테스팅 라이브러리/React-Testing-Library

React-Testing-Library에서 목업 활용법(useSelector 등을 Mock)

GROWNFRESH 2021. 1. 10. 15:52

useSelector, useDispatch 등의 함수는 가짜 데이터로 Mock-up 해야 한다.

 

 

stackoverflow.com/questions/60011473/testing-react-redux-useselector

 

testing react-redux useSelector

I have a react application which uses react-redux, useSelector to get data from the store. The react component has function PersonDataView() { const name= useSelector(state => state.data.na...

stackoverflow.com

위 게시글의 질문자에 따르면,

react testing library에서 목업데이터를 만들 수 있는 방법은 2가지다.

1) redux-mock-store 활용

2) jest 함수 사용

 

위 게시글에 jest 함수를 활용하는 다양한 방법이 나와 있으니 참고하기 바란다.

 

 

 

1) redux-mock-store 관련 사이트

github.com/vercel/next.js/issues/8145

 

Hooks Error: Combining with-redux and with-jest/with-jest-react-testing-library · Issue #8145 · vercel/next.js

Bug report Describe the bug Seeing(when using useDispatch hook): FAIL tests/index.test.js: Invariant Violation: Could not find react-redux context value; please ensure the component is wrapped in a...

github.com

 

 

2) jest mock함수 관련 사이트

velog.io/@yhe228/useSelector-%ED%95%A8%EC%88%98%EB%A5%BC-%ED%85%8C%EC%8A%A4%ED%8A%B8-%EC%BD%94%EB%93%9C%EC%97%90%EC%84%9C-%EC%82%AC%EC%9A%A9%ED%95%98%EB%8A%94-%EB%B0%A9%EB%B2%95

 

useSelector 함수를 테스트 코드에서 사용하는 방법

먼저 가짜 함수들을 react-redux.js 파일에 export 해준다테스트 케이스에서 아래와같이 jest.mock('react-redux')를 사용하면 위에서 만든 react-redux파일을 찾아 가져온다.다음으로 useSelector mock 함수를 조작

velog.io

// jest로 mocking하는 법 - 간략한 설명과 일련의 순서

 

 

www.daleseo.com/jest-fn-spy-on/

 

[Jest] jest.fn(), jest.spyOn() 함수 모킹

Engineering Blog by Dale Seo

www.daleseo.com

// jest.fn() 등에 대한 상세 설명, 개념을 잡기에 좋음

 

 

www.daleseo.com/jest-mock-modules/

 

[Jest] jest.mock() 모듈 모킹

Engineering Blog by Dale Seo

www.daleseo.com