Next.js + Storybook + jest 설정 방법

Next.js + 스토리북

설치

npm i --save-dev ts-node
npm i --save-dev jest
npm i --save-dev jest-environment-jsdom
npm i --save-dev ts-jest
npm i --save-dev @storybook/testing-react
npm i --save-dev @testing-library/jest-dom
npm i --save-dev @testing-library/react

설정

# package.json

{
  "scripts": {
    "test": "jest"
  }
}

// jest.config.ts

export default {
  preset: "ts-jest",
  testEnvironment: "jsdom",
  globals: {
    "ts-jest": {
      tsconfig: "./tsconfig.jest.json",
    },
  },
    moduleNameMapper: {
    "@/(.*)": "<rootDir>/src/$1",
  },
};

# tsconfig.jest.json

{
  "extends": "./tsconfig",
  "compilerOptions": {
    "jsx": "react-jsx"
  }
}

쓰다

// src/components/example.test.tsx

import { composeStories } from "@storybook/testing-react";
import { render } from "@testing-library/react";
import "@testing-library/jest-dom";

import * as stories from "@/components/example.stories";

describe("components/Example", () => {
  const { Default } = composeStories(stories);

  test("Show text", () => {
    const { getByTestId } = render(<Default text="This is a test text." />);
    const text = getByTestId("text");
    expect(text).toHaveTextContent("This is a test text.");
  });
});

운영

npm run test