Create-React-Appで作ったReactアプリのTest結果をCodeBuildでレポート出力する方法
はじめに
最近インフラ関係をAWSに移し、CodeBuildを使い始めたのですが、AWSの公式ガイドに書いてある内容通りにやってみてもテストレポートが出力されなかったので、今回自力で設定したことを備忘録もかねて残しておきます。
想定読者
CodeBuildのプロジェクト設定等はあらかた終わっていて、ビルドができるようになったので、テストレポートを出力したい人
1.React側の設定
まず公式ガイドにも書いてある通り、xml形式でファイルを出力するため、jest-junitを追加します。
yarn add jest-junit
そして公式ガイド通りにjestのreportersを設定しようとするとエラーが出ます。
プロジェクトルート直下のpackage.jsonに以下を記述してみてください。
module.exports = {
reporters: [
'default',
[ 'jest-junit', {
outputDirectory: <test report directory>,
outputName: <report filename>,
} ]
]
};
....
"jest": {
"reporters": [
"default",
[
"jest-junit",
{
"outputDirectory": "reports/results(結果を出力したい任意のディレクトリ)",
"outputName": "test-results.xml(出力したいファイル名)"
}
]
]
}
These options in your package.json Jest configuration are not currently supported by Create React App:
・reporters
If you wish to override...
Create-React-Appではその設定は認めません!と怒られてしまいました。
そこで、もう一度package.jsonを開き、scriptsの部分を編集し直接reportersを記述してやります。
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom --verbose",
++ "test:ci": "react-scripts test --watchAll=false --ci --reporters=default --reporters=jest-junit",
"eject": "react-scripts eject"
},
reporters以外の各optionは公式サイトに詳しく書いてあるのでここでは割愛します。
また、CodeBuildにCodePipelineなどを使ってCI/CD環境を導入することも多いと思うのでここではtest:ciコマンドを編集しています。自分がわかりやすいscript名で問題ありません。
consoleに戻って、test:ciコマンドを実行します。
yarn test:ci
...
yarn run v1.22.5
$ react-scripts test --ci --reporters=default --reporters=jest-junit
PASS src/tests/Main.test.js (7.653 s)
Main's debug test
√ should show all contents (645 ms)
Test Suites: 1 passed, 1 total
Tests: 1 passed, 1 total
Snapshots: 0 total
Time: 9.971 s, estimated 10 s
Ran all test suites related to changed files.
Watch Usage
› Press a to run all tests.
› Press f to run only failed tests.
› Press q to quit watch mode.
› Press p to filter by a filename regex pattern.
› Press t to filter by a test name regex pattern.
› Press Enter to trigger a test run.
うまくいきました。
これでプロジェクトルートにjunit.xmlというファイルが出力されていると思います。
出力先やファイル名を変更したい場合は、再度package.jsonを開き、以下の記述を追加します。
"jest-junit": {
"outputDirectory": "任意のディレクトリ",
"outputName": "任意のファイル名"
}
このディレクトリ名とファイル名はbuildspec.ymlでも使うので覚えておきましょう。
2 CodeBuild側の設定
buildspec.ymlの末尾に以下を追記すれば終わりです。便利!
reports:
jest_reports:
files:
- "package.jsonで指定したファイル名"
file-format: JUNITXML
base-directory: "package.jsonで指定したディレクトリ"
後はCodeBuildページからレポート履歴を見ていただければレポートがあると思います。
余談ですが2020年12月17日現在、buildspec.ymlのpre_build phaseでtestを実行してしまうと、
テストが失敗したときにレポートがうまく生成されない仕様となっているようです。
必ずbuildかpost_build phaseでtestは実行しようと思いました。こえー
また、test scriptsの実行に失敗するとその後のcommandsがスキップされるので
phases/build/commandsの順序には気を付ける、場合によってはtest fail時にも必要な処理はfinallyブロックに分けて記述するべきだなあと感じました。
(そもそもローカル環境でテスト通してからgit pushするからあまり想定しなくても良いことかもですが・・・)
意図的にエラーを出し、その後のdocker build等が行われないことを確認する。
以下は手元にあったtest後にdocker buildするymlファイル
build:
commands:
- yarn install
- yarn test:ci --watchAll=false
- docker build -t $ACCOUNT_ID.dkr.ecr.$DEFAULT_REGION.amazonaws.com/failedtest:latest .
- docker push $ACCOUNT_ID.dkr.ecr.$DEFAULT_REGION.amazonaws.com/failedtest:latest
[Container] 2020/12/17 09:26:21 Command did not exit successfully yarn test:ci --watchAll=false exit status 1
[Container] 2020/12/17 09:26:21 Phase complete: BUILD State: FAILED ##以降のdockerの処理が行われない
[Container] 2020/12/17 09:26:21 Phase context status code: COMMAND_EXECUTION_ERROR Message: Error while executing command: yarn test:ci --watchAll=false. Reason: exit status 1
[Container] 2020/12/17 09:26:21 Entering phase POST_BUILD
3.最後に
ここまで見てくださってありがとうございました。
初投稿なので緊張しました。何か間違っていたり、もっと良い方法がございましたら教えて頂けると幸いです
Author And Source
この問題について(Create-React-Appで作ったReactアプリのTest結果をCodeBuildでレポート出力する方法), 我々は、より多くの情報をここで見つけました https://qiita.com/koyama1003/items/67434669126402c54cf9著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .