NextJS

[NextJS] ESLint, Prettier, Recoil, React-Query, Storybook, Jest 설정 - 2편

2024-03-30

2편에서는 NextJS에 Jest, React-Testing-Library, Storybook을 설정하는 내용입니다.

1. Jest, React-Testing-Library 설치

공식문서를 참고해 설치했습니다.(eslint와 충돌이 많이 발생해 꽤나 번거롭습니다.)

Jest, RTL 라이브러리 설치

npm install -D jest jest-environment-jsdom @testing-library/react @testing-library/jest-dom

typescript 사용하시는 분들은 아래 코드를 추가적으로 입력해 주어야합니다.

 npm i ts-node

루트 폴더에 jest.setup.ts 생성 후 해당 코드 입력

import "@testing-library/jest-dom";

루트 폴더에 jest.config.ts 생성 후 해당 코드 입력

import type { Config } from "jest";
// eslint-disable-next-line import/extensions
import nextJest from "next/jest.js";

const createJestConfig = nextJest({
  dir: "./",
});

const config: Config = {
  coverageProvider: "v8",
  testEnvironment: "jest-environment-jsdom",
  setupFilesAfterEnv: ["<rootDir>/jest.setup.ts"],
  transformIgnorePatterns: [
    "/node_modules/",
    "^.+\\.module\\.(css|sass|scss)$",
  ],
  collectCoverageFrom: [
    "**/*.{js,jsx,ts,tsx}",
    "!**/*.d.ts",
    "!**/node_modules/**",
    "!<rootDir>/out/**",
    "!<rootDir>/.next/**",
    "!<rootDir>/*.config.js",
    "!<rootDir>/coverage/**",
  ],
  // 절대 경로 사용시
  moduleNameMapper: {
    "^@/(.*)$": "<rootDir>/src/$1",
  },
};

export default createJestConfig(config);

eslint cr 에러

해당 이슈(Delete ␍ eslint prettier/prettier)는 문장의끝 end line sequence에 대한 양식이 지켜지지 않아서 나타난다고 합니다.

****eslintrc.json의 rule에 해당 규칙을 추가해주어 해결했습니다.

rules: {
        'prettier/prettier': [
            'error',
            {
                endOfLine: 'auto',
            },
        ],
    },

2. Jest,React-Test-Library 기본사용법

저같은 경우는 test폴더를 따로만들지않고 직관적이게 하나의 폴더에 두는 편입니다. (~~TMI~~)

//dashboard/index.tsx
const DashBoard = () => {
  return (
    <div>
      <h1>하이 대쉬보드야</h1>
      <div>ㅇㅇ</div>
    </div>
  );
};

export default DashBoard;

//dashboard/index.test.tsx
import React from "react";
import { render, screen } from "@testing-library/react";
import "@testing-library/jest-dom";
import DashBoard from "@/app/components/dashboard";

describe("Dashboard", () => {
  it("shourd dashboard ", () => {
    render(<DashBoard />);

    const header = screen.getByRole("heading");
    expect(header).toHaveTextContent("하이 대쉬보드야");
  });
});