- 전체보기
- react(19)
- test(7)
- TDD(6)
- redux(6)
- mobx(3)
- react testing library(3)
- enzyme(2)
- hooks(2)
- react loadable(2)
- 2018(1)
- CSS(1)
- CSS Module(1)
- CockroachDB(1)
- ESLint(1)
- Front Endgame(1)
- HoC(1)
- Prettier(1)
- Sass(1)
- async(1)
- axios(1)
- axios mock adapter(1)
- code splitting(1)
- create react app(1)
- gdg(1)
- immer js(1)
- immutable js(1)
- jest(1)
- portals(1)
- react redux(1)
- react testing libraryr(1)
- styled components(1)
- 개발일지(1)
- 모달(1)
- 비동기(1)
- 상태관리(1)
- 최적화(1)
- 컨퍼런스(1)
- 컴포넌트 스타일링(1)
- 코드스타일(1)
- 행사(1)
- 회고(1)
- 회고록(1)
- 후기(1)
react-testing-library 의 비동기작업을 위한 테스트
리액트 애플리케이션에서 비동기 작업이 있을 때는 이를 어떻게 테스팅 하는지, 그리고 API 요청을 해야 하는 경우 이를 어떻게 mock 할 수 있는지에 대해서 알아보겠습니다. 우리가 이전에 만들었던 rtl-tutorial 프로젝트 디렉터리를 다시 에디터로 열어주세요....
react-testing-library 를 사용하여 TDD 개발 흐름으로 투두리스트 만들기
이제 우리는 리액트에서 react-testing-library 를 통하여 테스트 코드를 작성하는 방법을 배웠습니다. 이제 우리가 배운 것들을 활용하여, TDD 흐름으로 투두 리스트를 만들어봅시다. 기존에는 코드를 먼저 구현하고 이를 위한 테스트 코드를 작성했는데요, 이...
react-testing-library 를 사용한 리액트 컴포넌트 테스트
react-testing-library 에서는 Enzyme 과 달리 모든 테스트를 DOM 위주로 진행합니다. 그리고, 컴포넌트의 props 나 state 를 조회하는 일은 없습니다. 컴포넌트를 리팩토링하게 될 때에는, 주로 내부 구조 및 네이밍은 많이 바뀔 수 있어도 ...
Enzyme 을 사용한 리액트 컴포넌트 테스트
우선, 우리가 테스팅을 연습할 리액트 프로젝트를 만들겠습니다. CRA 를 통하여 프로젝트를 생성해주세요. 정리 이번 섹션에서는 Enzyme 을 통한 컴포넌트 테스팅에 대해서 알아보았습니다. Enzyme 의 공식 문서를 보면, Enzyme 에 있는 더 많은 기능...
리액트 테스트의 소개
리액트 컴포넌트를 테스트 할 때에는 주로 어떠한 결과가 화면상에 잘 나타났는지, 그리고 어떠한 이벤트 혹은 함수가 호출 됐을 때 원하는 업데이트가 잘 반영이 되는지를 확인합니다. 이를 수행하는 가장 기본적인 방법은 react-dom/test-utils 안에 들어있는 ...
TDD의 소개
TDD (Test Driven Development · 테스트 주도 개발) 에 대해서 알아봅시다! TDD 는 테스트가 개발을 이끌어 나가는 형태의 개발론입니다. 가장 쉽게 설명하자면, 선 테스트 코드 작성, 후 구현 인데요, 이는 총 3가지 주요 절차로 이루어져있습니다...
벨로퍼트와 함께하는 리액트 테스팅
이 튜토리얼에서는 리액트 프로젝트에서 TDD (Test Driven Development · 테스트 주도 개발)을 하는 방법에 대해서 알아보겠습니다. 소프트웨어 개발에서의 "테스트" 라는 개념에 대해서 1도 모르는 개발자도 이 튜토리얼을 마치고나면, "나는 리액트 테스...