[React & Jest ] 리액트 오픈소스 아주 살짝 구경해보기

언젠가 React같은 큰 프로젝트에 기여를 해보고 싶다.

React 작동 방식 공부도 할 겸 소스코드를 구경해보기로 했다.

 

💡오픈소스 이해하는 꿀팁

테스트코드를 먼저 보세요!

테스트코드를 먼저 보면 코드를 이해하는데 도움이 된다고 한다.

 

역시, 어렵다. 하지만, 한가지는 알겠다. 아래의 코드를 보자.

⌨️코드

원본 코드 링크

  it('renders an empty fragment', () => {
    const Div = () => <div />;
    const EmptyFragment = () => <></>;
    const NonEmptyFragment = () => (
      <>
        <Div />
      </>
    );

    ReactDOM.render(<EmptyFragment />, container);
    expect(container.firstChild).toBe(null);

    ReactDOM.render(<NonEmptyFragment />, container);
    expect(container.firstChild.tagName).toBe('DIV');

    ReactDOM.render(<EmptyFragment />, container);
    expect(container.firstChild).toBe(null);

    ReactDOM.render(<Div />, container);
    expect(container.firstChild.tagName).toBe('DIV');

    ReactDOM.render(<EmptyFragment />, container);
    expect(container.firstChild).toBe(null);
  });

빈 fragment를 렌더링 하는지 테스트하는 코드이다.

first child가 null이면 빈 fragment이다.

first child의 tag name이 div라면 빈 flagment가 아니다.

 

언젠가 기여까지 하는 날이 왔으면 좋겠다.

test코드를 보기 위해서라도 jest를 더 공부해야겠다.