테스트 코드 작성 공부

프론트 엔드 개발자로서 테스트코드 작성에 대한 공부와 이해도를 높이자
강석우's avatar
Mar 02, 2024
테스트 코드 작성 공부

테스트 종류

유닛테스트 - 가장 작은 단위의 테스트

통합테스트 - 유닛테스트의 결과물들이 하나로 묶여서 잘 작동하는지

E2E테스트 - 사용자들이 실제 사용하는 것처럼 테스트

로그인 기준

유닛

이메일 인풋 잘동작?

비밀번호 인풋 잘 동작?

버튼 클릭 잘?

통합테스트

가입된 이메일과 비밀번호를 사용해서 로그인 잘?

잘못된 정보 시도시 에러메세지 잘?

e2e테스트

로인페이지 접근 => 가입된 이메일과 비밀번호 사용해서 로그인 잘 되는지

로그인페이지 접근 후 잘못된 정보로 로그인 시도시 에러메세지 잘 되는지

통합 vs e2e ( 프론트에서 구분이 무의미 )

통합 = 렌더링 후 테스트

e2e = 페이지에 접근해 테스트

it, test

it과 test의 차이는 가독성 부분 뿐이다.

영어를 사용할 때는 it 을 사용해서 아래와 같이 사용하면 한 문장이 되기 때문에 it으로 가자.

한글은 반대로 test를 권장한다.

it("should test component A",()=>{
 console.log("it");
});

test("테스트케이스 1번, 00를 테스트한다",()=>{
 console.log("test");
})

describe

describe("",()=>{
 it("should test component A",()=>{
  console.log("it");
 });

 test("테스트케이스 1번, 00를 테스트한다",()=>{
  console.log("test");
 })
})

beforeEach

beforeEach(()=>{
 console.log('모든 test 또는 it 전에 돌아가는 코드입니다.')
})

beforeAll

beforeAll(()=>{
 console.log('전체 describe의 내용이 돌아가기 전에 돌아가는 코드입니다.')
})

afterEach

afterEach(()=>{
 console.log('모든 test 또는 it 후에 돌아가는 코드입니다.')
})

afterAll

afterAll(()=>{
 console.log('전체 describe의 내용이 돌아간 후에 돌아가는 코드입니다.')
})

fireEvent

change

fireEvent.change(getByLabelText(),{target:{value:'a'}}

fireEvent.change(getByLabelText(/picture/i), {
  target: {
    files: [new File(['(⌐□_□)'], 'chucknorris.png', {type: 'image/png'})],
  },
})
Share article

석우의 개발블로그