# react testing library

13개의 포스트
post-thumbnail

typescript, ESLint, Prettier, Jest, React-Testing-Library

nextjs에서 제공하는 명령어를 사용하여 nextjs 초기 프로젝트를 생성한다

2021년 7월 10일
·
0개의 댓글
post-thumbnail

react-testing-library 사용해보기

이제 테스트를 왜 해야하는지 작성했다면 어떻게 효과적으로 react-testing-library 를 사용해볼지 적어보겠다.

2021년 7월 6일
·
0개의 댓글
post-thumbnail

[react]5️⃣ TDD 방법으로 todolist-TodoApp

TodoApp 만들기 의 마지막 작업인 작업은 앞에서 따로 진행했던 유닛테스트를 거친 컴포넌트를 사용해서 구현하기 때문에 일종의 최종점검을 하는 통합테스트 작업이라고 볼 수 있다. 이 컴포넌트에서는 배열에 대한 모든 상태관리를 담당한다. 우선 컴포넌트의 틀을 잡

2021년 5월 5일
·
0개의 댓글
post-thumbnail

[react]4️⃣ TDD 방법으로 todolist-TodoItemList

TodoItemList 만들기 복수의 TodoItem 렌더링하기 이번 작업에서는 따로 UI 구성이 필요가 없다. 그저 에서 만들어진 항목들을 나열해주기만 하면 되기 때문에 을 사용해서 틀을 만들어 준 뒤 을 여러개 렌더링해주는 것에 대한 테스트케이스를 만든다. 다음으

2021년 5월 5일
·
0개의 댓글
post-thumbnail

[react]3️⃣ TDD 방법으로 todolist-TodoItem

TodoItem 만들기 이전 작업과 동일하게 의 틀만 상태로 만들어 준 다음 작업 시작! UI 구성하기 이 컴포넌트는 , , 이 들어있는 객체를 로 받아와서 텍스트와 을 보여주어야 한다. 이전에 만들었던 함수를 사용해서 테스트 코드를 작성해보면,

2021년 5월 5일
·
0개의 댓글
post-thumbnail

[react]1️⃣ react-testing-library 사용해보기

📌 본 포스팅은 제 개발지식의 전부라 할 수 있는 벨로퍼트님의 자료를 참고해서 작성합니다 :) https://learn-react-test.vlpt.us/#/ 개발을 함에 있어서 코드 한줄을 작성하면, 그 코드가 제대로 작동 하는지 검증하는 작업이 필요하다. 지금까

2021년 5월 5일
·
0개의 댓글
post-thumbnail

[react]2️⃣ TDD 방법으로 todolist-TodoForm

이번 작업에서는 TDD 개발 흐름에 따라서, 브라우저 확인은 마지막에 해볼 예정새 프로젝트를 생성하고해당 디렉터리에서 필요한 라이브러리들을 설치 후생성된 setupTest.js에 import 해준다.먼저 Todolist를 만들기 위해 어떤 컴포넌트와 기능들이 필요한지

2021년 5월 4일
·
0개의 댓글

material-ui select 테스트 코드 작성하기

testing-library를 사용material-ui로 만든 Select 컴포넌트 테스트 코드를 작성해야했는데해당 컴포넌트는 select 태그로 직접 구현된것이 아니라 어려움이 있었다.구글링을한 결과 공식 github의 contribute코드를 찾을수 있었다.위코드를

2021년 1월 31일
·
0개의 댓글
post-thumbnail

react-testing-library 를 사용하여 TDD 개발 흐름으로 투두리스트 만들기

이제 우리는 리액트에서 react-testing-library 를 통하여 테스트 코드를 작성하는 방법을 배웠습니다. 이제 우리가 배운 것들을 활용하여, TDD 흐름으로 투두 리스트를 만들어봅시다. 기존에는 코드를 먼저 구현하고 이를 위한 테스트 코드를 작성했는데요, 이번에는 반대로 테스트 코드를 먼저 작성하고 기능을 구현해보겠습니다. 우리는 앞으로 이런 ...

2019년 6월 4일
·
9개의 댓글
post-thumbnail

react-testing-library 를 사용한 리액트 컴포넌트 테스트

react-testing-library 에서는 Enzyme 과 달리 모든 테스트를 DOM 위주로 진행합니다. 그리고, 컴포넌트의 props 나 state 를 조회하는 일은 없습니다. 컴포넌트를 리팩토링하게 될 때에는, 주로 내부 구조 및 네이밍은 많이 바뀔 수 있어도 실제 작동 방식은 크게 바뀌지 않습니다. react-testing-library는 이 점을...

2019년 6월 4일
·
18개의 댓글
post-thumbnail

리액트 테스트의 소개

리액트 컴포넌트를 테스트 할 때에는 주로 어떠한 결과가 화면상에 잘 나타났는지, 그리고 어떠한 이벤트 혹은 함수가 호출 됐을 때 원하는 업데이트가 잘 반영이 되는지를 확인합니다. 이를 수행하는 가장 기본적인 방법은 react-dom/test-utils 안에 들어있는 유틸 함수를 사용하는 것 입니다. 그런데, 위 유틸 함수들을 직접 사용해서 테스트 코드를...

2019년 6월 4일
·
0개의 댓글