Jestを導入してコンポーネントのテストをする | Mac + Docker + Rails + Next.js その0038

参考にさせていただいたページ

インストールする

frontendディレクトリで作業を行っていきます。

% yarn add -D jest jest-environment-jsdom  @testing-library/react @testing-library/jest-dom @testing-library/user-event

frontend/jest.config.jsの作成とその記述内容

npx create-next-app@latest --example with-jest with-jest-app でcreateした場合に生成されるjest.config.jsをベースにして、以下の通り作成しました。

const nextJest = require('next/jest');

const createJestConfig = nextJest({
  // next.config.jsとテスト環境用の.envファイルが配置されたディレクトリをセット。基本は"./"で良い。
  // Provide the path to your Next.js app to load next.config.js and .env files in your test environment
  dir: './',
});

// Add any custom config to be passed to Jest
const customJestConfig = {
  setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
  moduleNameMapper: {
    // Handle module aliases (this will be automatically configured for you soon)
    // '^@/components/(.*)$': '<rootDir>/components/$1',
    // '^@/pages/(.*)$': '<rootDir>/pages/$1',
    '@/(.*)$': '<rootDir>/$1',
  },
  testEnvironment: 'jest-environment-jsdom',
};

// createJestConfig is exported this way to ensure that next/jest can load the Next.js config which is async
module.exports = createJestConfig(customJestConfig);

frontend/jest.setup.jsの作成とその記述内容

npx create-next-app@latest --example with-jest with-jest-app でcreateした場合に生成されるjest.setup.jsに倣って、以下の通り作成しました。

// Optional: configure or set up a testing framework before each test.
// If you delete this file, remove `setupFilesAfterEnv` from `jest.config.js`

// Used for __tests__/testing-library.js
// Learn more: https://github.com/testing-library/jest-dom
import '@testing-library/jest-dom/extend-expect'

Parsing error: Cannot find module 'next/babel' を解決する

このとき frontend/jest.config.js の1行目の1文字目にeslint のエラーが以下のように出ています。

Parsing error: Cannot find module 'next/babel'

frontend/.eslintrc.js に以下の+されている行を追記します。
検索すると'next/babel'を追記するという古い情報もありますが、'next'を追記します。

  extends: [
    'airbnb',
    'plugin:@typescript-eslint/recommended',
    'next/core-web-vitals',
    'plugin:import/errors',
    'plugin:import/warnings',
    'plugin:import/typescript',
+   'next',
    'prettier',
  ],

これで解消されました。

frontend/package.jsonのscriptsを追加する

npx create-next-app@latest --example with-jest with-jest-app でcreateした場合に生成されるjest.setup.jsに倣って、frontend/package.json に以下の+されている行を追記します。

  "scripts": {
    "dev": "next dev -p 3001",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
+   "test": "jest --watch",
+   "test:ci": "jest --ci",
    "preinstall": "typesync || :"
  },

テストの準備と実行

frontend/src/components/JestSample.tsxの作成とその記述内容

% mkdir src/components/

% vim src/components/JestSample.tsx

以下の通り記述しました。

export const JestSample = () => {
  return (
    <main>
      <h1>JestSampleコンポーネント</h1>
      <p>Jest導入の動作確認用サンプル</p>
    </main>
  );
};

frontend/src/components/JestSample.spec.tsxの作成とその記述内容

% mkdir src/components

% vim src/components/JestSample.spec.tsx

以下の通り記述しました。

import { JestSample } from '@/src/components/JestSample';
import { render } from '@testing-library/react';

describe('JestSampleコンポーネント', () => {
  test('内包する要素が描画されている', () => {
    const { getByText } = render(<JestSample />);
    expect(getByText('JestSampleコンポーネント')).toBeTruthy();
    expect(getByText('Jest導入の動作確認用サンプル')).toBeTruthy();
  });
});

実行してみる

以下のコマンドを実行します。

% yarn test

以下のような感じで成功しました。

ひとつ上の階層から実行してみる

% cd ../

% yarn --cwd ./frontend test

成功しました。

web_bonsaiの日記

web開発の学習日記です。誰に見せるためでもないただの日記です。