close

アプリケーションへのテストの追加 Next.js: 導入ガイド Unit Test

このセクションでは、単体テストと統合テストを追加してアプリケーションの品質を向上させるプロセスについて説明します Next.js。 アプリケーションの信頼性と機能性を確認するために、 Jest や など のテスト ライブラリを使用します。 Testing Library

による単体テスト Jest

Jest testing library は、アプリケーションで単体テストを実行するために よく使用されます JavaScript。 Next.js を使用して 単体テストをアプリケーションに追加する方法は次のとおりです Jest。

インストール Jest および関連ライブラリ:

npm install jest @babel/preset-env @babel/preset-react babel-jest react-test-renderer --save-dev

Jest 構成ファイル を作成します( jest.config.js)。 

module.exports = {  
  testEnvironment: 'jsdom',  
  transform: {  
    '^.+\\.jsx?$': 'babel-jest',  
  },  
};

次を使用して単体テストを作成します Jest。 

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

との統合テスト Testing Library

Testing Library は、アプリケーションでのユーザー操作をテストするための強力なツールキットです。 Next.js を使用してアプリケーション に統合テストを追加する方法は次のとおりです Testing Library。

インストール Testing Library および関連ライブラリ:

npm install @testing-library/react @testing-library/jest-dom --save-dev

以下を使用して統合テストを作成します Testing Library。 

import { render, screen } from '@testing-library/react';  
import App from './App';  
  
test('renders learn react link',() => {  
  render(<App />);  
  const linkElement = screen.getByText(/learn react/i);  
  expect(linkElement).toBeInTheDocument();  
});

結論

このセクションでは、 や など Next.js のテスト ライブラリを使用して単体テストと統合テストを追加することで、アプリケーションの品質を向上させる方法を紹介しました 。 テストを実行することで、問題を効果的に検出して対処しながら、アプリケーションの信頼性と機能性を確保できます。 Jest Testing Library