nuxt.jsでnightwatchを使ったe2eテストの設定

インストール系

$ npm install --save-dev nightwatch
$ npm install --save-dev selenium-server
$ npm install --save-dev json-server
# chromeを使ってe2eを実行する場合
$ npm install --save-dev chromedriver

ファイルの用意

nightwatch.conf.js

// json mock server を利用する場合
const Mock = require('./mockdata')
const mock = new Mock()

const jsonServer = require('json-server')
const serverJson = jsonServer.create()
const middlewares = jsonServer.defaults()
serverJson.use(middlewares)

module.exports = {
  "src_folders" : [ "test/e2e/specs" ],
  "output_folder" : "test/e2e/reports/",
  "custom_commands_path" : "",

  "selenium" : {
    "start_process" : true,
    // ここのバージョンはnpm installしたselenium-serverのバージョンにする
    "server_path": "node_modules/selenium-server/lib/runner/selenium-server-standalone-3.13.0.jar",
    "log_path" : "",
    "host" : "127.0.0.1",
    "port" : 4444,
    "cli_args" : {
      "webdriver.chrome.driver": "node_modules/chromedriver/bin/chromedriver"
    }
  },

  "test_settings" : {
    "default" : {
      "launch_url" : "http://localhost:3002",
      "selenium_host" : "127.0.0.1",
      "selenium_port"  : 4444,
      "silent": true,
      "output": true,
      "firefox_profile": false,
      "screenshots" : {
        "enabled" : true,
        "path" : "test/e2e/screenshots"
      },
      "desiredCapabilities": {
        "browserName": "chrome",
        "javascriptEnabled": true,
        "acceptSslCerts": true
      }
    }
  }
}

server-test.js

const { Nuxt, Builder } = require('nuxt')
const app = require('express')()

// Nuxt.js をインスタンス化
let config = require('./nuxt.config.js')
config.dev = !(process.env.NODE_ENV === 'production')
config.port = 3002
process.env.PORT=3002

const nuxt = new Nuxt(config)
// mockを見るように
config.env.API_URL = 'http://localhost:3001'

// httpでアクセスされたらhttpsへリダイレクトする
function forceHttps (req, res, next) {
  if (!process.env.PORT) {
    return next()
  }

  if (req.headers['x-forwarded-proto'] && req.headers['x-forwarded-proto'] === "http") {
    res.redirect('https://' + req.headers.host + req.url)
  } else {
    return next()
  }
}
app.all('*', forceHttps)

// プロダクション環境ではビルドしない
const promise = (config.dev ? new Builder(nuxt).build() : Promise.resolve())
promise.then(() => {
  app.use(nuxt.render)
  // devだったら3000 productionならprocess.env.PORT
  console.log('process.env.PORT' + config.port)
  app.listen(config.port)
  console.log('Server is listening on http://localhost:3002')
})
.catch((error) => {
  console.error(error)
  process.exit(1)
})

json mock serverを利用する場合 mockdata.js

module.exports = class Mock {
  getAccount() {
    return {'id': 1, 'email': 'test@example.com'}
  }
}

nightwatch.jsにエンドポイントを追加

serverJson.listen(3001, () => {
   console.log('JSON Server is running')
 })

serverJson.get('/api/accounts', function(req, res) {
  mock_response_json = mock.getAccount()
  res.jsonp(mock_response_json)
})

e2eテスト実行

$ node server-test.js

でテストサーバーを起動して

$ npm run e2e

でテストを実行出来る