Karma に詳しくない方のために説明すると、テストフレームワークに依存しない JavaScript テストランナーです。fountainjs ジェネレータにはテストフレームワーク Jasmine が含まれています。このコードラボの前半で、yo fountain-webapp を実行すると、ジェネレータはソースフォルダの mytodo フォルダに *.spec.js のパターンを持つファイルをスケフォールディングし、conf/karma.conf.js ファイルを作成し、Karma 用の Node モジュールを取り込みました。すぐに Jasmine スクリプトを編集してテストを記述しますが、まずはテストの実行方法を見てみましょう。

ユニットテストの実行

コマンドラインに戻り、Ctrl+C を使用してローカルサーバーを終了しましょう。package.json にはすでにテストの実行用の npm スクリプトがスケフォールディングされています。次のように実行できます。

npm test

すべてのテストに合格するはずです。

ユニットテストの更新

ユニットテストは src フォルダにスケフォールディングされているので、src/app/reducers/todos.spec.js を開きます。これは Todos リデューサのユニットテストです。たとえば、最初のテストに注目して、初期状態を検証します。(注: Windows では、127.0.0.1 localhost を etc/hosts ファイルに追加する必要がある場合があります。)

it('should handle initial state', () => {
  expect(todos(undefined, {})).toEqual([
    {
      text: 'Use Redux',
      completed: false,
      id: 0
    }
  ]);
});

そして、そのテストを下記のように置き換えます。

it('should handle initial state', () => {
  expect(todos(undefined, {})).toEqual([
    {
      text: 'Use Yeoman', // <=== HERE
      completed: false,
      id: 0
    }
  ]);
});

npm test でテストを再実行すると、テストが失敗していることがわかるはずです。

src/app/reducers/todos.js を開きます。

初期 state を以下に置き換えます。

const initialState = [
  {
    text: 'Use Yeoman',
    completed: false,
    id: 0
  }
];

素晴らしい、テストを修正しました。

アプリが大きくなり、チームに開発者が加わるにつれて、ユニットテストを作成しておくとバグをキャッチしやすくなります。Yeoman のスケフォールディング機能により、ユニットテストの作成が容易になるため、自分でテストを作成しない言い訳はありません！ ;)

« 概要に戻るまたは 次のステップへ »