JestでPuppeteerを動かしてCIで実行する
概要
- Reactで作ったアプリのE2EテストをCIで動かしたときのメモ
- 簡単なサンプルを作成してGitHub Actionsで動かすところまで紹介します
はまったところ
- ローカルでPuppeteerを実行する際は、アプリを起動しておいて別ターミナルでテストを実行すればよいので問題なかった
- CIで動かそうとした際に、その場でアプリを起動してそれに対してE2Eテストを実行したかったがどうやればいいか分からなかった
解決策
- jest-puppeteerを使うとテスト実行前にアプリを起動してくれるように設定できる
コード
- アプリのセットアップ
npx create-react-app jest-puppeteer-sample
cd jest-puppeteer-sample
yarn add -D jest puppeteer jest-puppeteer
- テストを作る
/e2e/sample.e2e.js
beforeAll(async () => {
await page.goto('http://localhost:3000');
});
afterAll(async done => {
done();
});
it('ページが表示されること', async () => {
const text = await page.evaluate(
() => document.querySelector('p').textContent,
);
expect(text).toBe('Edit src/App.js and save to reload.v');
});
- jestの設定ファイルを作る
/e2e/config.json
{
"preset": "jest-puppeteer",
"testMatch": ["/**/*.e2e.js"]
}
- jest-puppeteerの設定ファイルを作る
- このファイルが今回実現したかった内容の設定!
- これを書いておくとテスト実行前にアプリを起動してくれる!
jest-puppeteer.config.js
module.exports = {
server: {
command: 'BROWSER=none yarn start',
port: 3000,
},
};
- npm scriptsにE2Eテストの実行コマンドを追加する
package.json
// ...
"scripts": {
// ...
"e2e": "jest -c ./e2e/config.json"
},
// ...
ローカルで実行
- まずはローカルで実行してみる
- 事前にアプリを起動することなく、このコマンドだけで実行できた
GitHub Actionsで実行
- CIで回してみる
- 今回はGitHub Actionsを使ってみる
- 設定ファイルの追加
- nodeの環境を作ってライブラリをインストールしてテストを実行している
.github/workflows/main.yml
name: Main
on: [push]
jobs:
test:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v1
- name: Use Node.js 12
uses: actions/setup-node@v1
with:
node-version: 12
- name: install
run: |
yarn install
- name: test
run: |
yarn e2e
- GutHubにPushすると実行される
- CIでもJestを使ってPuppeteerを実行することができた!
Author And Source
この問題について(JestでPuppeteerを動かしてCIで実行する), 我々は、より多くの情報をここで見つけました https://qiita.com/ozaki25/items/ea0138dfa537f51aabef著者帰属:元の著者の情報は、元の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 .