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
でテストを実行出来る