React、Jest、Enzyme でテストの説明を表示する 3 つの方法
Jest でテストの説明をすべて表示する方法
--verbose オプションを使用する
最も簡単な方法は、--verbose オプションを使用することです。 このオプションを使用すると、Jest はテスト結果に加えて、すべてのテストの説明も表示します。
npx jest --verbose
--testResultsProcessor オプションを使用して、カスタムなテスト結果処理機を指定することもできます。 この処理機は、テスト結果をフォーマットする方法を制御することができます。 すべてのテストの説明を表示するカスタム処理機を作成するには、次のようにします。
const customProcessor = {
print(testResults, testSummary) {
for (const testResult of testResults) {
console.log(`\nTest: ${testResult.description}`);
console.log(` State: ${testResult.status}`);
if (testResult.failureDetails) {
console.log(` Error: ${testResult.failureDetails.message}`);
}
}
console.log(`\nSummary: ${testSummary.summary}`);
},
};
npx jest --testResultsProcessor=./customProcessor.js
jest.verbose プロパティを使用する
Jest の設定ファイル（jest.config.js）で jest.verbose プロパティを true に設定することもできます。 これにより、すべてのテストの説明がデフォルトで表示されます。
module.exports = {
verbose: true,
};
Enzyme の describe と it を使用する
Enzyme を使用している場合は、describe と it 関数を使用して、テストの説明を指定することができます。 Jest はこれらの説明を自動的に表示します。
import React from 'react';
import { shallow } from 'enzyme';
describe('MyComponent', () => {
it('should render correctly', () => {
const wrapper = shallow(<MyComponent />);
expect(wrapper).toMatchSnapshot();
});
});
上記のいずれかの方法を使用すると、Jest で実行するすべてのテストの説明を表示することができます。 どの方法を使用するかは、個人の好みやプロジェクトのニーズによって異なります。
補足:
- Jest のバージョンによっては、これらのオプションが利用できない場合があります。詳細は、Jest のドキュメントを参照してください。
- すべてのテストの説明を表示すると、テスト結果の出力が長くなる場合があります。 特定のテストの説明のみを表示したい場合は、
--grepオプションを使用することができます。
module.exports = {
verbose: true,
};
React コンポーネントのテスト（MyComponent.test.js）
import React from 'react';
import { shallow } from 'enzyme';
describe('MyComponent', () => {
it('should render correctly', () => {
const wrapper = shallow(<MyComponent />);
expect(wrapper).toMatchSnapshot();
});
});
カスタムテスト結果処理機（customProcessor.js）
const customProcessor = {
print(testResults, testSummary) {
for (const testResult of testResults) {
console.log(`\nTest: ${testResult.description}`);
console.log(` State: ${testResult.status}`);
if (testResult.failureDetails) {
console.log(` Error: ${testResult.failureDetails.message}`);
}
}
console.log(`\nSummary: ${testSummary.summary}`);
},
};
テストの実行
以下のコマンドを使用して、テストを実行することができます。
npx jest
このコマンドを実行すると、すべてのテストの結果と、すべてのテストの説明が表示されます。
Test: MyComponent should render correctly
State: passed
Summary:
1 test passed
カスタムテスト結果処理機を使用する場合は、以下のコマンドを使用します。
npx jest --testResultsProcessor=./customProcessor.js
Test: MyComponent should render correctly
State: passed
Test: AnotherComponent should do something
State: failed
Error: Unexpected error
Summary:
1 test passed
1 test failed
この例では、カスタム処理機は、テストの説明、ステータス、およびエラーメッセージ（失敗したテストの場合）を表示します。 独自のフォーマットを作成するには、この処理機をカスタマイズすることができます。
Jest でテストの説明をすべて表示するその他の方法
--filter オプションを使用して、特定のテストのみを実行することができます。 このオプションとワイルドカードを使用して、テストの説明の一部に一致するすべてのテストを選択することができます。 例えば、以下のコマンドを実行すると、MyComponent という名前を含むすべてのテストの説明が表示されます。
npx jest --filter=MyComponent
grep コマンドを使用して、テスト結果から特定のテキストを検索することもできます。 例えば、以下のコマンドを実行すると、MyComponent という名前を含むすべてのテストの説明が表示されます。
npx jest | grep MyComponent
IDE またはエディタのテストランナーを使用する
多くの IDE やエディタには、Jest テストを実行するためのビルトインのテストランナーが用意されています。 これらのテストランナーは、通常、テスト結果に加えて、すべてのテストの説明も表示します。
テスト結果ファイルを生成する
--json オプションを使用して、テスト結果を JSON ファイルに出力することができます。 このファイルを後から解析して、すべてのテストの説明を取得することができます。
npx jest --json=test-results.json
cat test-results.json | jq '.tests[] | .description'
reactjs jestjs enzyme
