追記

記事内で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をあまり触っていなかったこともあり結構ハマりました。