Next.jsのテスト【Jest編】 #JavaScript

概要

ReactのフレームワークNext.jsで開発することになったので、勉強したことをメモ的に投稿していこうと思います。

Next.js 公式ページ

 Jest / TypeScript Deep Dive 日本語版

テストの準備

1. Jestのインストール

$ yarn add --dev jest babel-jest babel-core babel-preset-env babel-preset-react @types/jest

2. Jestの設定

jest.config.js

module.exports = {
    roots: ["<rootDir>"],
    transform: { "^.+\\.tsx?$": "babel-jest" },
    testPathIgnorePatterns: [
        "<rootDir>.next/",
        "<rootDir>/node_modules/"
    ],
    moduleFileExtensions: [
        "ts", "tsx", "js", "jsx", "json", "node"
    ],
    testMatch: ["**/__tests__/**/*.test.(ts|tsx|js)"]
}

3. テストの実行

package.json

{
  "test": "jest"
}

ざっくりまとめ

１. 必要なパッケージをインストール

２. jest.config.jsをプロジェクトのルートに追加し設定

３. package.jsonにコマンドを追加

あとは__tests__ディレクトリーを作成しその直下にテストファイル〇〇.test.tsなど作成し、jestを実行するだけ。