追記
記事内でvue-cliを使っていますが古いバージョンのようです。
@vue/cliを使用して再度書き直すつもりです。そしたら躓くこともないのかも…！
-> 書き直しました。すんなりできました。
初めに
VueJS触れるときのテンプレートとして作りました。
…がinitした状態のままテスト実行したら躓いたのでその対処法までです。
実施環境
$ sw_vers
ProductName: Mac OS X
ProductVersion: 10.15.3
BuildVersion: 19D76
Vueを使えるようにするまで
npmを使ってVueCLIをインストールする
(今回はグローバルインストールしていない)
mkdir VueJsProjects
cd VueJsProjects
npm init -y
npm install vue-cli
Vueのパスを通す
sed -i '' 's/\"test\": \"echo \\\"Error: no test specified\\\" && exit 1\"/\"vue\": \"vue\"/g' package.json
プロジェクトを作成する
npm run vue init webpack hogehoge
? Project name hogehoge
? Project description vue project
? Author hogehoge@mail.com
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Set up unit tests Yes
? Pick a test runner jest
? Setup e2e tests with Nightwatch? Yes
? Should we run `npm install` for you after the project has been created? (recom
mended) npm
... # インストール開始
To get started:
cd hogehoge
npm run dev
実行
cd hogehoge
npm run dev
Git管理
ここではGitを使いバージョン管理を行う
git init
git add .
git commit -m "first commit."
CI
CI/CDについても気になったので試してみる
npm test
セキュリティエラーでFAILに…。
FAIL test/unit/specs/HelloWorld.spec.js
● Test suite failed to run
SecurityError: localStorage is not available for opaque origins
調べてみるとjestのバージョンの問題の可能性があるらしい。
test/unit/jest.conf.js
module.exports = {
verbose: true,
testURL: "http://localhost/",
...
}
上記を追加して再度実行
npm test
...
PASS test/unit/specs/HelloWorld.spec.js
HelloWorld.vue
✓ should render correct contents (23ms)
...
Running: default e2e tests
Error retrieving a new session from the selenium server
Connection refused! Is selenium server started?
{
value: {
message: 'session not created: Chrome version must be between 71 and 75\n' +
...
jestは通ったがe3eでエラー。
chromedriverのバージョンをチェックする
$ npm list | grep chromedriver
├─┬ chromedriver@2.46.0
$ npm info chromedriver versions
[
...
'2.46.0', '73.0.0', '74.0.0',
'75.0.0', '75.0.1', '75.1.0', '76.0.0', '76.0.1', '77.0.0',
'78.0.0', '78.0.1', '79.0.0', '79.0.1', '79.0.2', '79.0.3',
'80.0.0', '80.0.1'
]
chromedriverをアップデートする。
chromeは普段最新版しか使わないのでドライバーも最新版を使うようにする。
sed -i '' 's/\"chromedriver\": \"^2.27.2\"/\"chromedriver\": \"latest\"/g' package.json
npm install -dev
npm list | grep chromedriver
├─┬ chromedriver@80.0.1
アップデートが完了したので再度実行
npm test
Running: default e2e tests
{ parser: "babylon" } is deprecated; we now treat it as { parser: "babel" }.
✔ Element <#app> was visible after 103 milliseconds.
✔ Testing if element <.hello> is present.
✔ Testing if element <h1> contains text: "Welcome to Your Vue.js App".
✔ Testing if element <img> has count: 1
OK. 4 assertions passed. (8.794s)
テストが実行できるようになったので後処理。
git add .
git commit -m "hoge"
git remote add origin [作成済みのリポジトリを使用]
git push -u origin master
まとめ（というか感想）
Vueをインストールしてテスト&実行するだけですが割と手順が必要でした。
（そのままテストくらいパスするようにならないかな…？
）
解決してまとめてみるとこれくらいの分量ですがnpmをあまり触っていなかったこともあり結構ハマりました。