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使う場面がテストだけじゃないので知識が活かせる

Bad

レンダリング待機したりなどseleniumチックなことをやらなければいけない。モックモナー

結論

cypress一択