🎯 컴포넌트를 만들고 테스트 코드를 통해 검증합니다.

📗 Today I Learned

Title 컴포넌트 작성

// 📄 Title.tsx
import { styled } from 'styled-components';
import { ColorKey, HeadingSize, Theme } from '../../style/theme';

interface Props {
  children: React.ReactNode;
  size: HeadingSize;
  color?: ColorKey;
}

export default function Title({ children, size }: Props) {
  return <TitleStyle size={size}>{children}</TitleStyle>;
}

const TitleStyle = styled.h1<Omit<Props, 'children'>>`
  font-size: ${({ theme, size }) => (theme as Theme).heading[size].fontSize};
  color: ${({ theme, color }) =>
    color ? (theme as Theme).color[color] : (theme as Theme).color.primary};
`;

• Title은 <h1> 태그로 렌더되며, styled로 스타일이 지정됩니다.

• font-size : 전달받은 size 키에 따라 테마에서 해당 폰트 사이즈 값을 가져옵니다.

• color : color가 있다면 해당 색상을 사용하고, 없으면 primary 색상을 사용합니다.

Test 코드 작성

테스트는 @testing-library/react를 사용하여 렌더링 결과를 확인합니다.

// 📄 Title.spec.tsx
import { render, screen } from '@testing-library/react';
import Title from './Title';
import { BookStoreThemeProvider } from '../../context/ThemeContext';

describe('Title 컴포넌트 테스트', () => {
  it('렌더링 확인', () => {
    render(
      <BookStoreThemeProvider>
        <Title size='large'>제목</Title>
      </BookStoreThemeProvider>
    );

    expect(screen.getByText('제목')).toBeInTheDocument();
  });

  it('size props 적용', () => {
    const { container } = render(
      <BookStoreThemeProvider>
        <Title size='large'>제목</Title>
      </BookStoreThemeProvider>
    );

    expect(container?.firstChild).toHaveStyle({ fontSize: '2rem' });
  });

  it('color props 적용', () => {
    const { container } = render(
      <BookStoreThemeProvider>
        <Title size='large' color='primary'>
          제목
        </Title>
      </BookStoreThemeProvider>
    );

    expect(container?.firstChild).toHaveStyle({ color: 'brown' });
  });
});

• describe : 테스트할 그룹을 묶는 용도입니다.

  • [ 테스트 1 ] '렌더링 확인'

    • render(...): Title 컴포넌트를 화면에 렌더링 시킵니다.

    • <BookStoreThemeProvider> : styled-components에서 테마 값을 쓰기 위해 감싸줍니다.

    • screen.getByText('제목') : 렌더된 화면에서 '제목'이라는 텍스트를 가진 요소를 찾습니다.

    • expect(...).toBeInTheDocument() : 찾은 요소가 화면에 존재하는지를 확인합니다.

  • [ 테스트 2 ] '사이즈 확인'

    • render(...) : size='large'를 넣은 Title 컴포넌트를 화면에 렌더링 시킵니다.

    • container.firstChild : 렌더된 컴포넌트의 가장 바깥 요소 (<h1>)를 가져옵니다.

    • expect(...).toHaveStyle({ fontSize: '2rem' }) : 찾은 요소가 font-size: 2rem 스타일을 가지고 있는지 확인합니다.

  • [ 테스트 3 ] '색깔 확인'

    • render(...) : color='primary를 넣은 Title 컴포넌트를 화면에 렌더링 시킵니다.

    • container.firstChild : 렌더된 컴포넌트의 가장 바깥 요소 (<h1>)를 가져옵니다.

    • expect(...).toHaveStyle({ color: 'brown' }) : 찾은 요소가 color.primary = 'brown' 스타일을 가지고 있는지 확인합니다.

---

Button 컴포넌트 작성

// 📄 Button.tsx
import { styled } from 'styled-components';
import { ButtonScheme, ButtonSize, Theme } from '../../style/theme';

interface Props {
  children: React.ReactNode;
  size: ButtonSize;
  scheme: ButtonScheme;
  disabled?: boolean;
  isLoading?: boolean;
}

export default function Button({
  children,
  size,
  scheme,
  disabled,
  isLoading,
}: Props) {
  return (
    <ButtonStyle
      size={size}
      scheme={scheme}
      disabled={disabled}
      isLoading={isLoading}
    >
      {children}
    </ButtonStyle>
  );
}

const ButtonStyle = styled.button<Omit<Props, 'children'>>`
  font-size: ${({ theme, size }) => (theme as Theme).button[size].fontSize};
  padding: ${({ theme, size }) => (theme as Theme).button[size].padding};
  color: ${({ theme, scheme }) => (theme as Theme).buttonScheme[scheme].color};
  background-color: ${({ theme, scheme }) =>
    (theme as Theme).buttonScheme[scheme].backgroundColor};
  border: 0;
  border-radius: ${({ theme }) => (theme as Theme).borderRadius.default};
  opacity: ${({ disabled }) => (disabled ? 0.5 : 1)};
  pointer-events: ${({ disabled }) => (disabled ? 'none' : 'auto')};
  cursor: ${({ disabled }) => (disabled ? 'none' : 'pointer')};
`;

• ButtonStyle은 <button> 태그로 렌더되며, props를 받아 스타일을 입혀줍니다.

• theme.button[size] → 크기별 font-size, padding을 지정합니다.

• theme.buttonScheme[scheme] → 색상 스타일별 color, backgroundColor를 지정합니다.

• disabled → opacity, pointer-events, cursor 속성을 지정합니다.

Test 코드 작성

// 📄 Button.spec.tsx
import { render, screen } from '@testing-library/react';
import Button from './Button';
import { BookStoreThemeProvider } from '../../context/ThemeContext';

describe('Button 컴포넌트 테스트', () => {
  it('렌더링 확인', () => {
    render(
      <BookStoreThemeProvider>
        <Button size='large' scheme='primary'>
          버튼
        </Button>
      </BookStoreThemeProvider>
    );

    expect(screen.getByText('버튼')).toBeInTheDocument();
  });

  it('글자 크기 확인', () => {
    render(
      <BookStoreThemeProvider>
        <Button size='large' scheme='primary'>
          버튼
        </Button>
      </BookStoreThemeProvider>
    );

    expect(screen.getByRole('button')).toHaveStyle({ fontSize: '1.5rem' });
  });

  it('색상 확인', () => {
    render(
      <BookStoreThemeProvider>
        <Button size='large' scheme='primary'>
          버튼
        </Button>
      </BookStoreThemeProvider>
    );

    expect(screen.getByRole('button')).toHaveStyle({ color: 'white' });
  });
});

• [ 테스트 1 ] '렌더링 확인'

  • screen.getByText('버튼') : 렌더된 화면에서 '버튼'이라는 텍스트를 가진 요소를 찾습니다.

  • expect(...).toBeInTheDocument() : 찾은 요소가 화면에 존재하는지를 확인합니다.

• [ 테스트 2 ] '글자 크기 확인'

  • screen.getByRole('button') :

  • expect(...).toHaveStyle({ fontSize: '1.5rem' }): 찾은 요소가 font-size: 1.5rem 스타일을 가지고 있는지 확인합니다.

• [ 테스트 3 ] '색상 확인'

  - screen.getByRole('button') :

  • expect(...).toHaveStyle({ color: 'white' }): 찾은 요소가 color: 'white' 스타일을 가지고 있는지 확인합니다.

---

Input 컴포넌트 작성

// 📄 InputText.tsx
import React, { ForwardedRef } from 'react';
import styled from 'styled-components';
import { Theme } from '../../style/theme';

interface Props {
  placeholder?: string;
}

const InputText = React.forwardRef(
  ({ placeholder }: Props, ref: ForwardedRef<HTMLInputElement>) => {
    return <InputTextStyle placeholder={placeholder} ref={ref} />;
  }
);

const InputTextStyle = styled.input.attrs({ type: 'text' })`
  padding: 0.25rem 0.75rem;
  border: 1px solid ${({ theme }) => (theme as Theme).color.border};
  border-radius: ${({ theme }) => (theme as Theme).borderRadius.default};
  font-size: 1rem;
  line-height: 1.5;
  color: ${({ theme }) => (theme as Theme).color.text};
`;

export default InputText;

• InputText은 forwardRef를 이용해 외부 컴포넌트에서 전달받은 ref를 <input> 태그에 연결해주는 역할을 합니다.

• styled.input.attrs({ type: 'text' }) : type: 'text'인 input 요소를 렌더링하게 됩니다.

🤔 왜 forwardRef가 필요한 걸까?

기본적으로 React는 함수형 컴포넌트에 ref를 직접 전달하지 못합니다.
ref는 일반 props와 다르게 처리되기 때문에, 자식 컴포넌트에 넘기고 싶다면, React.forwardRef로 감싸줘야합니다.

// 부모
function Parent() {
  const inputRef = useRef(null);

  return <ChildInput ref={inputRef} />;
}

// 자식
const ChildInput = React.forwardRef((props, ref) => {
  return <input ref={ref} />;
});

Test 코드 작성

// 📄 InputText.spec.tsx
import { render, screen } from '@testing-library/react';
import InputText from './InputText';
import { BookStoreThemeProvider } from '../../context/ThemeContext';
import React from 'react';

describe('InputText 컴포넌트 테스트', () => {
  it('렌더링 확인', () => {
    render(
      <BookStoreThemeProvider>
        <InputText placeholder='여기에 입력하세요' />
      </BookStoreThemeProvider>
    );

    expect(
      screen.getByPlaceholderText('여기에 입력하세요')
    ).toBeInTheDocument();
  });

  it('forwardRef 테스트', () => {
    const ref = React.createRef<HTMLInputElement>();

    render(
      <BookStoreThemeProvider>
        <InputText placeholder='여기에 입력하세요' ref={ref} />
      </BookStoreThemeProvider>
    );

    expect(ref.current).toBeInstanceOf(HTMLInputElement);
  });
});

• [ 테스트 1 ] '렌더링 확인'

  • screen.getByPlaceholderText('여기에 입력하세요') : placeholder 속성을 기준으로 인풋 요소를 찾아 반환합니다.

  • expect(...).toBeInTheDocument() : 찾은 요소가 화면에 존재하는지를 확인합니다.

• [ 테스트 2 ] 'forwardRef 테스트'

• ref.current : forwardRef를 통해 전달된 ref 객체로, 현재 연결된 DOM 요소를 참조합니다.

• expect(...).toBeInstanceOf(HTMLInputElement) : 찾은 요소가 <input> 요소인지 확인합니다.

---

✏️ 회고

테스트 코드 자체를 짜는 것에는 어려움이 없었지만, styled-components와 타입에 대해 익숙치 않다보니 어려웠던 거 같다.