FrontEngineer JungBam

Watch Usage : Press w to show more에서 w를 입력 › Press p to filter by a filename regex pattern. 를 선택(p를 입력) :: 파일 네임으로 필터링 해서 테스트하는 것 1. only : 해당 테스트만 실행 2. skip : 해당 테스는 생략

서버에서 어떠한 값을 받아서 그 값에 따른 매핑을 통해 컴포넌트를 렌더링 시킬 경우 테스트를 하기 위해서는 findby 메소드를 사용해야 한다.(비동기적으로 동작하는 값에 대해서 getby메소드를 사용했을 때에는 해당 요소를 찾을 수 없다.) import { render, screen } from '@testing-library/react'; test('비동기 요청 후 DOM 요소 확인', async () => { // 비동기 요청 실행 render(); const element = await screen.findByTestId('some-element'); // DOM 요소 확인 expect(element).toBeInTheDocument(); }); 너무나 당연한 이야기이지만 비동기 요소에 따라서 동..

Jest에서 컴포넌트 내부 이벤트 트리거를 테스트 하는 가장 일반적인 함수 두가지 userEvent와 fireEvent에 대해서 알아보자. 1. fireEvent 이벤트 객체를 생성하여 해당 이벤트를 컴포넌트에 트리거 시키는 함수 fireEvent는 컴포넌트의 이벤트 핸들러를 직접 호출하기 때문에 컴포넌트 내부의 특정 코드 경로를 테스트하는데에 적합하다. ex) fireEvent.click(element) 2. userEvent 클라이언트의 인터렉션을 모방하는 동작을 하는 함수 * 실제 사용자가 웹 페이지나 애플리케이션과 상호작용하는 것과 유사한 동작을 수행한다. 즉, fireEvent보다 사용자의 행위를 더 잘 시뮬레이션한다고 생각하면 되고 사용자의 행위에 따른 결과를 테스트하는 데에 더 적합하다고 할..

eslint-plugin 설치 npm install eslint-plugin-testing-library eslint-plugin-jest-dom .vscode/setting.json { "editor.codeActionsOnSave": { "source.fixAll.eslint": true }, "editor.defaultFormatter": "esbenp.prettier-vscode", "editor.formatOnSave": true } .eslintrc.json { "plugins": [ "testing-library", "jest-dom" ], "extends": [ "react-app", "react-app/jest", "plugin:testing-library/react", "plugin:j..

처음 리액트로 프로젝트를 진행할 때에 테스트 코드가 필요가 없었다. 작은 프로젝트나 유지보수, 서비스가 되지 않는 포트폴리오용 프로젝트를 진행하면서 많은 사람들이 가질 수 있는 생각이 '왜? 굳이? 테스트 코드를 작성해야되지?'라는 부분일 것이다. 나도 부트캠프를 하고 마지막 보드게임을 만들고 한달간 보드게임에 대한 유저의견 반영 및 성능 최적화를 진행하면서도 '테스트 코드? 필요없는데?' 라는 생각을 했던 것 같다. 하지만 이번 회사를 다니면서 절실히 깨달은 것이 두가지가 있는데 첫번째는 테스트 코드의 필요성, 그리고 두번째는 리팩토링의 필요성이었다. 이전에 내 생각에도 적었다싶이 워크플로우가 막장에 가까운 회사였고 개발문화가 정착이 되어 있지 않은 회사이다보니 문제점이 많았다. 그 중 가장 큰 문제는..