Vue.jsでテスト実行まで触れてみた。

Vue.jsやってみよう

最近の技術に触れてないので、なんとなく有名なやつを触れました。

環境構築

VueCLIのインストール

以下のコマンドを流してnpm runまで進めます。
プロジェクトオプションは全てデフォルトで行きます。

npm install -g vue-cli
vue init webpack my-project
cd my-project
npm install
npm run dev

成功したら、下記のようなログが出ます。

DONE Compiled successfully in 5051ms 18:04:32
I Your application is running here: http://localhost:8080

http://localhost:8080にアクセスすると、親より見た画面が表示されます。

ついでにSASSを使う準備もしておきます。

cd src
npm install sass-loader node-sass --save-dev

1-a.テストを流してみる

とある方がテストを流していたので、試してみます。
Vueのe2eテスト初体験です・・・！

npm test
〜 中略 〜
FAIL  test/unit/specs/HelloWorld.spec.js
  ● Test suite failed to run

    SecurityError: localStorage is not available for opaque origins

はい。失敗しました。
原因はjest.conf.jsの設定にありました。
以下のtestURLを追加する必要があるようです。

module.exports = {
  testURL: 'http://localhost/',
  rootDir: path.resolve(__dirname, '../../'),
...

今度こそテスト実行します。

 PASS  test/unit/specs/HelloWorld.spec.js
  HelloWorld.vue
    ✓ should render correct contents (22ms)

----------------|----------|----------|----------|----------|-------------------|
|  File         |  % Stmts | % Branch |  % Funcs |  % Lines | Uncovered Line #s |
----------------|----------|----------|----------|----------|-------------------|
All files       |      100 |      100 |      100 |      100 |                   |
 HelloWorld.vue |      100 |      100 |      100 |      100 |                   |
----------------|----------|----------|----------|----------|-------------------|

とりあえず時間がないのでテストまで。。。
次回は、RSSリーダを作成できたら良いな。。。

参考にさせて頂いた記事

＊追記
タイトルを修正いたしました。
誤解を招いてしまい、すみません。。。