Next.js 시작하기 - 프로젝트 세팅 (3) Zustand/Jest/MUI

Zustand 설치

npm install zustand

import { create } from 'zustand'

const useStore = create((set) => ({
  count: 1,
  inc: () => set((state) => ({ count: state.count + 1 })),
}))

Jest 설치

npm install -D jest @types/jest ts-jest
npm i -D babel-jest @babel/core @babel/preset-env

// jest.config.js
module.exports = {
  preset: 'ts-jest',
  testEnvironment: 'node',
};

// package.json
"test": "jest"

테스트 예시

// src/components/sample.ts
const sum = (a: number, b: number) => a + b;
export default sum;

// sample.test.ts
import sum from './sample';

describe('sum', () => {
  test('adds 1 + 2 to equal 3', () => {
    expect(sum(1, 2)).toBe(3);
  });
});

MUI 설치

npm i @mui/material-nextjs @mui/icons-material @emotion/styled @emotion/react @emotion/cache