Try! Vue CLI 3(インストール~プロジェクト作成~テスト)

Try! Vue CLI 3(インストール~プロジェクト作成~テスト):

はじめに

本記事はタイトルの通り、Cloud9でVue CLI 3をインストールして、プロジェクトを作成して、jestを使ったテストまでトライしてみたものになります。

Cloud9特有の設定やVue CLI 3から採用された新しいものがあったので、メモ代わりに記事にしてみました。

開発環境

Cloud9 - template:Blank

OSはUbuntuなので、同じOSなら殆ど同じように進められると思います。

NVMのインストール

template:Blankにも関わらずnode.jsがインストール済なので、複数のバージョンを管理する為にNVMをインストール

curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.11/install.sh | bash 

node.jsのインストール

Vue CLI 3 推奨のバージョン[8.11.0]をインストール

nvm install 8.11.0 

デフォルトのnode.jsのバージョンを8.11.0に変更

nvm alias default 8.11.0 

バージョンの確認

node --version 

Yarnのインストール

curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add - 

echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list 

sudo apt-get update && sudo apt-get install yarn 

インストールの確認

yarn --version 

Vue CLIのインストール

yarnでインストールすると正常にCLIが動作しなかった為、npmでインストール。

npm install -g @vue/cli 

参考: 動作しなかった時に実行したコマンドはyarn global add @vue/cli

Vueプロジェクトの作成

vue create [プロジェクト名] 

Vueプロジェクトの設定(PWAやLinterなど)

Please pick a preset:

• default(babel, eslint): デフォルト設定
• Manually select features: PWAやVuexなど、defaultに存在しない機能を使用する場合に選択

本記事ではManually select featuresを選択。

Check the features needed for your project:

必要とする機能をspaceキーで選択。全て選択する場合はaキーで一括選択が可能。選択が終わったらEnter。

本記事ではBabel, Progressive Web App (PWA) Support, Linter / Formatter, Unit Testingを選択。

各機能の設定

パッケージマネージャーの設定の他、Linter / Formatterを選択した場合はツールやStyleGuideの設定、Unit Testingを選択した場合はテストツールの設定等を行います。

本記事ではパッケージマネージャーはyarn, Linter / FormatterはESLint + Airbnb config, Unit TestingはJestを選択。

Cloud9の為の設定

デフォルトの設定の場合、localhostがCloud9ではなく、使用中のパソコンを見てしまい、正常に起動しない為、設定ファイルを作成・編集。

[project_root]直下にvue.config.jsを作成して設定。(webpack.config.jsではない)

設定内容は下記の通り

vue.config.js

module.exports = { 
  devServer: { 
    host: '0.0.0.0', 
    disableHostCheck: true 
  } 
} 

※[project_root]は、vue createで作成されたプロジェクト名と同じ名前がついたフォルダ

ひな形ページをローカルサーバーで実行

cd [project_root] 

yarn run serve 

Jest(ユニットテスト)の実行

全てのテストを実行する場合は、

yarn run test:unit 

指定のファイルだけテストする場合は

yarn run test:unit [ファイル名] 

デフォルトだと[project_root]/tests/unit/*.spec.(js|jsx|ts|tsx)がテストの対象。

テスト対象の設定は[project_root]/jest.config.jsファイル内のtestMatchで変更可能。(vue createの時の設定次第ではpackage.jsonになると思われる)

e.g. sum関数のテスト

sum関数がコーディングされたsum.jsを作成

[project_root]/src/sum.js

function sum(a, b) { 
  return a + b; 
} 
module.exports = sum; 

sum.jsをテストするsum.spec.jsを作成

[project_root]/tests/sum.spec.js

const sum = require('@/sum'); 
 
test('adds 1 + 2 to equal 3', () => { 
  expect(sum(1, 2)).toBe(3); 
}); 

sum.spec.jsの1行目の@は[project_root]/srcを示している。

つまり@/sumと[project_root]/src/sum.jsはイコール。

この@を[project_root]/srcにマッピングしている設定は、[project_root]/jest.config.js内のmoduleNameMapperで行っている。

テストを実行

yarn run test:unit sum.spec.js