React

Localstorage를 통해 테마를 저장하고, 적용하는 방법

const toggleTheme = () => {
    setThemeName(themeName === "light" ? "dark" : "light");
    localStorage.setItem(
      THEME_LOCALSTORAGE_KEY,
      themeName === "light" ? "dark" : "light"
    );
  };
  useEffect(() => {
    const savedThemeName = localStorage.getItem(
      THEME_LOCALSTORAGE_KEY
    ) as ThemeName;
    setThemeName(savedThemeName || DEFAULT_THEME_NAME);
  }, []);

useEffect를 통해, localstorage에 저장된 테마 색상을 확인하고 없으면 디폴트 테마색상을, 있으면 해당 테마색상을 적용하며 현재 값을 로컬스토리지에 저장한다.
toggle버튼을 통해, 색상을 바꿀때도 로컬스트리지 값을 변경하면서 테마를 변경시킨다.

React 컴포넌트 테스트

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" });
  });
});

React에서의 테스트는 크게 두가지로 나뉜다.

• render : 체크할 컴포넌트를 렌더링해온다.
• expect : 해당 컴포넌트를 렌더링 해온것의 속성을 체크한다.