uni's code uni's code

test code를 작성하기 위해, jest와 react testing library를 사용하였습니다. 1. test code의 기본 틀 describe('validation test', () => { it('when nothing input, submit button is disabled', async () => { //given & when render(); //then const submitButton = await screen.findByRole('button', { name: '계정 만들기', }); expect(submitButton).toBeDisabled(); }); it('when email is not valid, email error appear', async () => { //giv..

testcode 관련 eslint 설정에 대해 알아보겠습니다. 일반 규칙 뿐만 아니라, test code에서 권장하는 lint도 고쳐주기 때문에, 협업을 하거나 초기에 배울 때 도움이 될 것 같습니다. 1. install npm install eslint-plugin-testing-library eslint-plugin-jest-dom 2. react 에 적용 // .eslintrc.json { "plugins": ["testing-library", "jest-dom"], "extends": [ "react-app", "react-app/jest", "plugin:testing-library/react", "plugin:jest-dom/recommended" ] } 3. next.js에 적용 // .es..

테스트코드를 작성해야한다는 점이 중요하다는 것은 진작 알고는 있었지만, 시간이 없다는 이유로 도전하지 못했었다. 이번에 회사에서 대대적으로 프론트 리빌딩을 하는 과정 속, TDD를 쓰자고 건의하였고, TDD에 대해 알아보면서 정리한 내용을 아래에 담았다. 1. TDD란? test driven development 의 약자로 “테스트 주도 개발” 코드를 개발하는 과정에서 테스트코드가 추가됨으로, 코드 개발을 하고 테스트 코드를 작성하는 과정으로 오해할 수 있으나, 이는 경기도 오산!(ㅋㅋ) TDD 과정은 아래와 같다. 테스트를 작성하고 테스트가 정상이 될때가지 코드를 작성한다~ → 테스트 실패시 코드 작성하며 테스트 성공할때까지 작성 -> 리팩토링 1) 테스트 케이스를 작성 2) 코드 개발 -> 테스트 케..