# react testing library
[React Test] jest-dom custom matcher, rtl 쿼리 종류 링크
jest-dom custom matcher, rtl 쿼리 종류 링크
React App Test(5-2) : 비동기 작업 개선
이전 포스트의 내용을 통해 비동기 코드의 테스트를 위해서 findAllByRole 퀴리를 사용하는 방법을 알아보았다. findAllByRole로 Async.js가 리렌더링 되기를 기다려 결과적으로 listitem에 접근할 수 있다. 딱히 문제는 없었지만, 최선의 코드는
React App Test(5-1) : 비동기 작업
비동기 코드 테스트를 위해 Async.js와 Async.test.js를 만들어 보도록 하자. fetch 해 온 posts data를 setPost로 담는다. return되는 부분은 아래와 같다. state에 저장한 data 값을 li로 렌더링해주고 있다. 먼저 Asy
React App Test(4) : UI, State 테스트하기
React App을 테스트 할 때, state 값과 UI(User Interaction)에 관련된 내용은 어떻게 처리가 가능할까?이 내용을 알아보기 위해 Greeting이라는 컴포넌트를 아래와 같이 작성해보도록 하자.state값에 따라 처음 화면에는 It's good
React App Test(3) : 테스트 그룹화(Suite)
Test Suite에 대해 알아보도록 하자.App의 규모가 커질수록 적게는 수십 개에서 수백 개의 test 파일이 생길 수 있다. 이런 여러 테스트 파일을 Test Suite로 묶어 정리할 수 있다. 예를 들어 feature나 관련 component를 기준으로 하여 해
React App Test(2) : 코드 작성과 실행
두근두근.. 첫 번째 테스트를 실행해보자React App 작업이 완료되었다면, create-react-app으로 프로젝트 생성시 함께 만들어진 setupTests.js와 App.test.js 파일에 주목해보자.파일 이름이 의미하듯, 몇 가지 setup 작업을 수행하는
React App Test(1) : 개념과 종류, tools
작성한 코드를 '테스트'하는 코드를 작성하자!React 앱과 컴포넌트에 초점을 맞춰 자동화된 테스팅의 세계로 뛰어들어 보자..테스팅(Testing)이란 정확히 무엇일까? 왜 하는 것일까?Unit Test를 이해해보자리액트 컴포넌트를 테스트하고 build해보자
INSTACOOLIKE 테스팅 코드 TIL
사진에서 처럼 await has no effect 라고 되어있으면서 await를 없애면 event가 먹히지 않는다... 아무것도 입력되지 않은것으로 나온다. await를 입력하자...(진짜 이것때문에 1시간이상을 헤맸다... jest 일해라...)Use .toHaveB
TDD(Test-Driven Development), RTL(React Testing Library), Test Types
코드 작성 전에 테스트를 작성하고, 테스트에 통과하도록 코드를 작성하는 것입니다 (Write tests before writing code then write code according to "spec" set by tests)흔히 레드-그린 테스트라고 합니다 ("re
RTL(React Testing Library) vs Jest
테스트를 위한 가상 DOM을 제공(Provides virtual DOM for tests)브라우저 없이 테스트를 진행하면 클릭 요소와 같은 작업을 할 때 가상 DOM이 필요, 그리고 가상 DOM이 원하는 대로 작동하는지 확인가능테스트 러너(Test runner that
react-testing-library로 테스트 코드를 작성해보자
테스트 코드를 사용하면 우리가 프로젝트를 개발하는 과정에서 우리가 써내려가는 코드가 기존의 기능들을 실수로 망가뜨리는 것을 아주 효과적으로 방지할 수 있다. 또한 개발하게 될 때 실제 발생할 수 있게 되는 상황에 대하여 미리 정해놓고 그에 맞춰 코드를 작성하게 되면 우
react-testing-library, 유저 이벤트
[TIL][엘리스 SW 엔지니어 트랙] 12주차 - react-testing-library, 유저 이벤트
React Testing Library(Jest)를 활용하여 TDD 경험해보기 -2(Unit Test 편)
프론트엔드에서 간단하게 Unit test를 적용하는 법✨
React Testing Library로 List 요소 찾기
React Testing Library의 getByRole을 통해 list 요소 찾는 간단한 예제.
typescript, ESLint, Prettier, Jest, React-Testing-Library
nextjs에서 제공하는 명령어를 사용하여 nextjs 초기 프로젝트를 생성한다
