Jest 6

React Testing: Components testing

😎 React Compontets testing 리액트 공식페이지를 보면 components testing에 아래와 같이 두가지 라이브러리를 추천하고있다. Jest is a JavaScript test runner that lets you access the DOM via jsdom. While jsdom is only an approximation of how the browser works, it is often good enough for testing React components. Jest provides a great iteration speed combined with powerful features like mocking modules and timers so you can have mor..

개인공부/TDD 2021.11.25

React Testing: Hooks testing

🧐 Hooks testing? 리액트 프로젝트에서 react-hooks를 사용한다면, 공통된 로직이든 상태관련 로직이든 다양한 custom hook을 만들어 사용하게된다. 따라서 reducer나 component 테스팅뿐만 아니라 이러한 custom hook들이 의도대로 작동하는지도 테스팅해주는 것이 좋다. 하나의 component에서 사용되는 hook이거나 간단한 로직의 hook이라면 직접 테스팅하는 것이 쉽겠지만, 복잡한 로직의 hook이나 API요청이 있는 hook등은 직접 테스팅하는 것이 조금은 복잡할 수 있다. testing-library/react-hook 라이브러리를 사용하면 이러한 hook들을 쉽게 테스팅할 수 있다. 📚 testing-library/react-hooks testing-li..

개인공부/TDD 2021.11.21

React Testing: Reducer testing (with Redux)

🧐 Redux는 테스트하기 쉽다? 리액트로 프로젝트를 진행하면서, 전역상태관리를 위해 리덕스를 사용하는 이유중 하나는 테스트하기 쉽다라는 것이다. 테스트코드를 직접 작성해보기 전에는 어떤 점에서 쉽다는 건지 잘 이해가 되지 않았지만, 테스트코드를 작성하면서 테스팅이 용이하다고 느낀점은 아래의 2가지였다. 하나의 Store로 관리하기 때문에 리덕스로 관리하는 components들을 테스팅하기 쉽다. 리듀서는 순수함수로 구성되고, 라이브러리들이 잘 관리되어있어서 리듀서 테스팅, 미들웨어를 적용한 테스팅이 쉽다. 이번 글에서는 Redux의 Reducer들을 테스트한 내용을 기록해보도록 하겠다. 📚 Reducer testing 리듀서 테스팅은 state와 action을 테스트 케이스에 따라 넘겨주고, 그에 맞게..

개인공부/TDD 2021.11.17

Typescript, Jest환경에서 alias적용하기 (절대경로 import)

🧐 절대경로 import ? 보통 디렉토리구조가 복잡하지 않다면 import 시 상대경로로 설정해도 큰 불편함이 없다. 그러나 디렉토리 구조가 복잡할수록 상대경로가 길어지고 보기 안좋아지게 되는데, 나의 경우 테스트코드를 작성하면서 절대경로로 import할 필요성을 느끼게되었다. 디렉토리구조는 아래와 같다. ├── _test/ ㄴ_reducer/ ㄴ todo.test.ts ㄴ components/ ㄴ hooks/ ... ├── src/ ㄴ _reducer/ ㄴ todo.ts ㄴ components/ ㄴ hooks/ ...src폴더와 같은 deps에 _test폴더가 존재하기때문에 _test폴더의 파일에서 src폴더의 파일들을 import하기 위해서는 조금은 어지러운 상대경로를 설정해야했다. 따라서 이를 간..

개인공부/TDD 2021.10.31

jest 환경에서 import 사용 설정하기(typescript)

🧐 왜 jest환경에서 import를 사용하기위해서 따로 설정이 필요할까? 이유는 jest가 node환경에서 실행되기 때문이다. 즉 Webpack같은 번들러의 결과물을 실행하는 것이 아니라 파일의 코드 그대로 실행한다. 따라서 ES6나 기타 문법을 사용하고 싶다면 테스트 환경에서 사용하는 babel.config.js 또는 babelrc 파일을 설정해야 합니다. ❓ 바벨 설정 파일 차이 .babelrc : 하위 디렉토리나 파일에서 특정 플러그인이나 변환(규칙)을 실행할 때 사용 babel.config.js : 여러 패키지 디렉토리를 가진 프로젝트에 설정할 때 사용 babel.config.json : babel.config.js 사용에 의한 API 노출로 인해 이에 대한 노출 방지와 복잡도를 줄이기 위해 정..

개인공부/TDD 2021.10.19