Vue.jsのテスト
使用するテストフレームワーク
vue-test-utilsと呼ばれるテストフレームワークを使用します。Vue.jsの公式サイトにて推奨されているものです。
vue-test-utilsはコンポーネントを個々に分離してにマウントして、必要な入力をモックしたり、や出力をアサートしたりすることでテストを行います。
テストコードの概略を解説
テストコードの主要なメソッド
先ほど紹介したgithubに置かれているコードを使いながらテストコードについて解説していきます。まず下のコードがテストをする対象のコンポーネントのコードです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
export default { template: ` <div> <span class="count">{{ count }}</span> <button @click="increment">Increment</button> </div> `, data () { return { count: 0 } }, methods: { increment () { this.count++ } } } |
このコンポーネントはボタンをクリックするとカウンターが1ずつ増えていくものです。次のコードがテストコードです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
// Import the mount() method from the test utils // and the component you want to test import { mount } from '@vue/test-utils' import Counter from './counter' describe('Counter', () => { // Now mount the component and you have the wrapper const wrapper = mount(Counter) it('renders the correct markup', () => { expect(wrapper.html()).toContain('<span class="count">0</span>') }) // it's also easy to check for the existence of elements it('has a button', () => { expect(wrapper.contains('button')).toBe(true) }) it('button should increment the count', () => { expect(wrapper.vm.count).toBe(0) const button = wrapper.find('button') button.trigger('click') expect(wrapper.vm.count).toBe(1) }) }) |
まずmountメソッドによってマウントされたcomponentはWrapper内に返されます。このWrapperはVueインスタンスを操作(mainpluating)、トラバース(travers)、クエリ(querying)したりするためのメソッドを公開しています。今回使ったメソッドは以下の4つ
|
html |
string型のhtml要素を返す |
|
contains |
指定したhtml要素を返す |
|
find |
指定したDOM NodeまたはVueコンポーネントを返す |
|
vm |
Vueインスタンスを返す |
この指定した要素に対して、出力条件を定義し、テストをしていきます。
Vueのテストを実行してみる
itに該当するテストの名前をつけることができます。以下のコードは<span class=”count”>0</span>が正しくレンダリングされたかどうかを確かめるコードです。
|
1 2 3 4 5 6 7 8 9 10 |
import { mount } from '@vue/test-utils' import Counter from './counter' describe('Counter', () => { const wrapper = mount(Counter) it('renders the correct markup', () => { expect(wrapper.html()).toContain('<span class="count">0</span>') }) } |
ではnpm testを叩いて上手くいくかどうかをテストしてみましょう。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
❯ npm test > vue-test-utils-getting-started@1.0.0 test /Users/~/vue-test-utils-getting-started > jest PASS ./test.js Counter ✓ renders the correct markup (3ms) Test Suites: 1 passed, 1 total Tests: 1 passed, 1 total Snapshots: 0 total Time: 1.354s Ran all test suites. |
renders the correct markupの部分にチェックが通ってテストが無事成功していることがわかります。では最後にあえてテストが失敗するようにテストコードを変更してみましょう。
|
1 2 3 4 5 6 7 8 9 10 |
import { mount } from '@vue/test-utils' import Counter from './counter' describe('Counter', () => { const wrapper = mount(Counter) it('renders the correct markup', () => { expect(wrapper.html()).toContain('<span class="count">1</span>') // 0→1 に変更 }) } |
実際のコードの初期値は0ですが、1に変更してテストを実行してみましょう。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
❯ npm test > vue-test-utils-getting-started@1.0.0 test /Users/~/vue-test-utils-getting-started > jest FAIL ./test.js Counter ✕ renders the correct markup (4ms) ● Counter › renders the correct markup expect(string).toContain(value) Expected string: "<div><span class=\"count\">0</span> <button>Increment</button></div>" To contain value: "<span class=\"count\">1</span>" at Object.<anonymous> (test.js:11:28) at new Promise (<anonymous>) at processTicksAndRejections (internal/process/task_queues.js:93:5) Test Suites: 1 failed, 1 total Tests: 1 failed, 1 total Snapshots: 0 total Time: 0.694s, estimated 1s Ran all test suites. npm ERR! Test failed. See above for more details. |
renders the correct markupでテストがこけていることが確認できました。
Vue-test-unitsを導入する方法
では実際に自分のVueのプロジェクトで使っているテスト環境構築方法について紹介します。package.jsonに以下の記述を追加します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
"scripts": { ~~略 "test": "vue-cli-service test:unit" }, "dependencies": { "@babel/preset-env": "^7.6.3", ~~略 }, "devDependencies": { ~~略 "@babel/core": "^7.1.5", "@vue/cli-plugin-unit-jest": "^4.0.5", "@vue/test-utils": "^1.0.0-beta.29", "babel-jest": "^24.9.0", "jest": "^24.9.0", "vue-jest": "^3.0.5", }, "jest": { "moduleNameMapper": { "^vue$": "vue/dist/vue.common.js" }, "moduleFileExtensions": [ "js", "vue" ], "transform": { "^.+\\.js$": "<rootDir>/node_modules/babel-jest", ".*\\.(vue)$": "<rootDir>/node_modules/vue-jest" } }, |
次に.babelrcを追加します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
{ "env": { "test": { "presets": [ [ "@babel/preset-env", { "targets": { "node": "current" } } ] ] } } } |
この状態でパッケージをインストールした後、npm run test を叩くとテストをすることができます。
Vue.jsの単体テストvue-test-utilsの概要解説は以上です。間違い等がございましたらご指摘していただければ幸いです。
参考サイト
エンジニアにイチ押しアイテム
目の疲労回復グッズ
ディスプレイをずっと見続けた時の目の疲労感ってすごいですよね。血行が悪くなっているというかズーンて重い感じがして、ひどい時は気持ち悪くなったりした経験をもつ人も多いのではないのかと思います。目って今後生きて行く上で非常に大切なものですし、ちゃんとにケアしていきたいものです。そこで私が日常的に使っている目のマッサージアイテムを紹介します。
アイマッサージャー 二年間保証 最新グラフェン加熱技術 目元マッサージャー
私は寝る前必ず使用しています。15分間目を40°で保温&マッサージしてくれて、本当に極楽の時間です。その後は快眠で、翌日の朝の目の疲労度が全くなくなりました。Amazonのレビューがこの商品の良さを物語っています。
コスパ最強20㎏×2ダンベル
実は筋トレって記憶力を向上させる効果があるんです。米国のジョージア工科大学が筋トレを20分間行なうと、記憶力が10％ほど向上するこという研究結果を最近発表したほどです。私はここのところ、老化からか体型が崩れてきたのに危機感を覚え購入。実際に筋トレしてみると筋トレ後のすっきり感がやばい。勉強の集中力も確かに上がるような気がしました。また、腕立てとかじゃ鍛えにくい肩なんかもパンパンになるので、男らしい体型を手に入れたいなと少しでも思っている人は買うべきアイテムだと思います。中でも以下のダンベルはAmazon内での評価が非常に高いので迷ったらこれを買いましょう。
ダンベル 【最新進化版・3in1】Wolfyok 純鋼製アレー アレイ 20kgセット(10kgx2) 30kgセット(15kgx2)
座椅子DIYで疲労防止
長い間椅子に座って作業することはエンジニア、理系学生にとってはつきものだと思います。ですが、この椅子の性能によって作業後の疲労感が全く異なるということを意識したことがありますか？私は以下の２つのアイテムを使って座椅子をゲーミングチェア並みにアップデートしました。おかげで姿勢が安定し、作業後の疲労感も減りました。また何より集中して作業に打ち込めるようになりました。
IKSTAR クッション 低反発 座布団 第五世代 オフィス
IKSTAR クッション 低反発【メーカー直営・１年保証付】 ランバーサポート
コードの可読性を高める
自分が大型ベンチャーの内定インターンに初めて参加した時、周りの超優秀なエンジニアの方々のコードをみて自分のコードの汚さに絶望しました。その時自分のマネージャーに勧められた本がリーダブルコード ―より良いコードを書くためのシンプルで実践的なテクニックという超有名な一冊です。美しいコードを書くためのエッセンスが凝縮されています。エンジニアを職種として選ぶ方は読まない理由がない一冊です。自分もこの本を読んで、かなりコーディングスキルが向上したと感じています。
ネットワークの基礎を押さえる本
ITの基礎がおぼつかなくて、ネットワークの話についていけなかった時、早稲田大学のエンジニアの友人が勧めてくれたのがネットワークはなぜつながるのか 第2版 という本です。ハードウエアから、理論までネットワークの基礎が非常にわかりやすく解説されています。「TCP」「IP」「リゾルバ」という用語を説明できないエンジニアは間違いなく買ったほうがいいです。自分は知らなくてバカにされたので。笑