Jest6 [TDD] 투두리스트를 TDD로 개발하기 - TodoForm 2023.05.24 - [🌳Frontend/react] - [TDD] 투두리스트를 TDD로 개발하기 - TodoItem TodoForm 테스트코드 먼저 작성 import { render, screen } from '@testing-library/react' import TodoForm from '@/components/todo-list/TodoForm' import userEvent from '@testing-library/user-event' describe('Test TodoForm', () => { it('할 일을 입력해야 추가 버튼이 활성화된다.', async () => { render() const user = userEvent.setup() const textField = screen.getB.. 2023. 5. 25. Next.js 초기셋팅 정리 (with Typescript/ESLint/prettier/jest/testing-libarary) Next.js를 구축하고 환경설정하는 게시글은 띄엄띄엄 정리하긴 했지만, 하나의 게시글로 정리하고 싶어서 다시 씀. 읽기전에 패키지 버전차이가 있을 수 있습니다. (이로인해 실행이 제대로 되지 않을 수 있습니다.) 초기셋팅은 왠만하면 공식문서를 보고 따라하는 것이 좋습니다. 저는 node pakage manaement tools 로 yarn 을 사용합니다. (npm으로 설치할 수도 있지만, yarn을 더 선호하는 편 입니다.) 타입스크립트를 사용합니다. Next.js 프로젝트 생성 yarn create next-app --typescript 1. 프로젝트 이름을 적어주세요 2. ESLint를 사용할 것인지 3. Tailwind CSS 를 사용할 것인지 4. src directory를 사용할 것인지 5. .. 2023. 5. 25. [TDD] 투두리스트를 TDD로 개발하기 - TodoItem 본 게시글은 아래 포스팅을 읽고 작성했습니다. https://velog.io/@seo__namu/%EC%9A%94%EA%B5%AC%EC%82%AC%ED%95%AD-%EC%A0%95%EC%9D%98%ED%95%98%EA%B8%B0 요구사항 정의하기 React + TDD 투두리스트 개발하기 시리즈 요구사항 정의하기 velog.io TDD 테스트 주도 개발 진행과정 1. 실패하는 테스트코드 작성 2. 테스트 케이스를 통과하기 위한 최소한의 코드 작성 3. 코드 리팩토링 위의 단계를 계속 반복한다. 즉, 요구사항들에 부합하는 테스트코드를 작성하고, 그 테스트코드가 실행되기 위한 컴포넌트 로직을 짜는 것이다. 준비물 - react project - jest(자바스크립트 테스팅 프레임워크) + testing Lib.. 2023. 5. 24. jest 테스트코드 작성시 Cannot find module jest 를 이용해서 타입스크립트 테스트코드 작성시, import 오류가 났었다. 해결방안 jest 사용시 jest config 를 잘 작성해주어야 한다. jest 는 기본적으로 javascript 를 기대하고 실행하지만, 나는 typescript 로 작성했었다. 그러므로 해당 ts 테스트코드를 js로 변환해주어야 한다. 아래 코드를 추가하니 정상작동 하였다. moduleNameMapper: { // Handle module aliases (this will be automatically configured for you soon) '^~/(.*)$': '/$1', }, transform: { '^.+\\.ts?$': 'ts-jest', }, 2023. 3. 22. 이전 1 2 다음 728x90 반응형
