e2eにcypressとjest-puppeteer使った
結論
cypress一択
技術検証+基盤導入の仕事があってどっちも軽く使ってみた。
cypress
導入まで
npm install cypress --save-dev
package.json
"scripts": { ... "test": "jest test", // cypressもテストするのでディレクトリ指定 "cypress:open": "cypress open", "cypress": "cypress run" },
.eslintrc.js
globals: { cy: true, },
cypress.json
{ "baseUrl": "http://localhost:3000" "video": false // ビデオとかいらないので }
テストの頭に
// eslint-disable-next-line spaced-comment /// <reference types="Cypress" />
モック(これがバカ熱い)
cy.route({ method: 'GET', url: `/api/hoge`, response: 'fixture:hoge.json' })
課題
nuxtjsでやったけどカバレッジがjsしか取れなかった。あまり深堀せず。
Good
レンダリング待機とかそこらへんが一切不要。スラスラテストかける。モックかける
Bad
CIがだるい、これ依存しすぎでしょ。
apt-get install libgtk2.0-0 libgtk-3-0 libnotify-dev libgconf-2-4 libnss3 libxss1 libasound2 libxtst6 xauth xvfb
jest-puppeteer
導入まで
npm install --save-dev jest-puppeteer puppeteer jest
.eslintrc.js
globals: { page: true },
jest.config.js
preset: 'jest-puppeteer'
package.json
"scripts": { ... "test:e2e": "jest e2e" },
jest-puppeteer.config.js
module.exports = { launch: { headless: true, slowMo: 1000 // これアプリケーション起動するまで待機してる感じ。よくないとおもう }, server: { command: 'BROWSER=none npm run dev', port: 3000, launchTimeout: 50000 } }
モック。interceptorなの
await page.setRequestInterception(true); page.on('request', request => { if (request.url() === constants.API) { request.respond({ content: 'application/json', headers: {"Access-Control-Allow-Origin": "*"}, body: JSON.stringify(constants.biddersMock) }); } else { request.continue(); } });
課題
jestだからカバレッジ取れるけど統合出来るのかな?
Good
puppeteer使う場面がテストだけじゃないので知識が活かせる
結論
cypress一択