[TDD] test code 작성하기 ( with jest, react testing library)

test code를 작성하기 위해,

jest와 react testing library를 사용하였습니다.

 

 

---

 

 

---

 

 

1.  test code의 기본 틀

describe('validation test', () => {
  it('when nothing input, submit button is disabled', async () => {
    //given & when
    render(<Register />);

    //then
    const submitButton = await screen.findByRole('button', {
      name: '계정 만들기',
    });
    expect(submitButton).toBeDisabled();
  });

  it('when email is not valid, email error appear', async () => {
    //given
    render(<Register />);

    //when
    const emailInput = screen.getByRole('textbox', {
      name: '이메일',
    });
    await userEvent.type(emailInput, 'test01@naver');

    //then
    const errorEl = await screen.findByText('이메일을 올바르게 입력해 주세요.');
    expect(errorEl).toBeInTheDocument();
  });

  ... 
});

위와 같이 

describe (grouping, ()=>{

   it (test case) 

   it (test case) 

} ) 
형식으로 작성합니다.

 

2. test code의 matcher

test code에서 가장 자주 사용하는 패턴은 expect - matcher 입니다.

즉, ~는 ~일 것이다. 단언의 느낌으로 쓰이는데요.

matcher는 바로 밑 링크에서 찾아서 사용하시면 됩니다.

 

https://github.com/testing-library/jest-dom

 

 

3. test code의 query

test code에서 요소를 찾을 때 query문을 사용합니다. 

query문도 아래 링크에서 찾아서 사용하시면 됩니다.

 

https://testing-library.com/docs/queries/about/

 

추가적으로, query 사용시 크게 종류가 3가지로 나뉩니다.

1) get

2) query

3) find

 

 

 

---

참고자료

https://github.com/testing-library/jest-dom

GitHub - testing-library/jest-dom: Custom jest matchers to test the state of the DOM

https://testing-library.com/docs/queries/about/

https://blog.logrocket.com/testing-react-apps-jest-react-testing-library/#introduction-to-jest-and-react-testing-library