概要
Nuxt.jsで、jestというテスティングフレームワークを使って、コンポーネントのテストを書いてみました。
準備
※vue-cli
でNuxt.jsのプロジェクトは作成済とします。
jest-vue-preprocessorをインストールします。
たぶんVueとjestを連携するためのもの。。
$ npm i -D jest jest-vue-preprocessor babel-jest
vue-test-utilsをインストールします。
きっとテストのUtilでしょう。。
npm i -D vue-test-utils
package.json
に、jest用の設定を追記します。
"jest": { "moduleNameMapper": { "^vue$": "vue/dist/vue.common.js" }, "moduleFileExtensions": [ "js", "vue" ], "transform": { "^.+\\.js$": "<rootDir>/node_modules/babel-jest", ".*\\.(vue)$": "<rootDir>/node_modules/jest-vue-preprocessor" } }
テストがjestで実行されるように、scriptsも package.json
に追記します。
"scripts": { "test": "jest", ... },
プロジェクトルートに、 .babelrc
を作成します。
babel用の設定だと思うんですが、babelは知識不足でイマイチよく分かってないです。。
ただしこれがないとテストはエラーになって動きませんでした。
{ "presets": ["env"] }
これで、テストがjestで実行できるようになります。
$ npm test
テスト対象のコンポーネント
下記のようなコンポーネントを components/Mikan.vue
として作成します。
<template> <p>{{ name }} は {{ priceWithTax }}円</p> </template> <script> export default { data: function() { return { name: 'みかん', price: 100 } }, computed: { priceWithTax: function() { return this.price * 1.08 } }, methods: { calcAmount: function(count) { return this.price * count }, calcAmountWithTax: function(count) { return this.calcAmount(count) * 1.08 } } } </script>
プロパティのテスト
名前や値段のテストをします。
テスト用のファイルは test/components/Mikan.test.js
として作成します。
import { mount } from 'vue-test-utils' import Mikan from '../../components/Mikan' // 直接test()を書くこともできるが、 // テストの大まかな単位でdescribeして囲っておくとよさげ describe('Mikan', () => { let wrapper // beforeEachは各test毎の実行前に呼び出される beforeEach(() => { // mountすると、コンポーネントをテストで扱いやすくしたようなラッパーオブジェクトが作られる // プロパティやメソッドにアクセス可能になる // またDOMにも仮想DOMとしてアクセスできるようになる模様 wrapper = mount(Mikan) }) test('name is みかん', () => { // wrapper.vm でコンポーネントのプロパティにアクセスできる expect(wrapper.vm.name).toEqual('みかん') }) test('price is 100', () => { expect(wrapper.vm.price).toEqual(100) }) })
computedのテスト
プロパティと同じようにテストできます。
test('priceWithTax is 108', () => { expect(wrapper.vm.priceWithTax).toEqual(108) })
メソッドのテスト
メソッドもvm経由で呼び出せばOKです。
describe('3 Mikans', () => { const count = 3 let wrapper beforeEach(() => { wrapper = mount(Mikan) }) test('calcAmount is 300', () => { expect(wrapper.vm.calcAmount(count)).toEqual(300) }) test('calcAmountWithTax is 300', () => { expect(wrapper.vm.calcAmountWithTax(count)).toEqual(324) }) })
テスト結果
npm test
すると下記のように結果が表示されます。
Mikan ✓ name is みかん (12ms) ✓ price is 100 (1ms) ✓ priceWithTax is 108 (1ms) 3 Mikans ✓ calcAmount is 300 (1ms) ✓ calcAmountWithTax is 300 (1ms)
scriptを "test": "jest --coverage"
に書き換えると、カバレッジも見られるようになります。
-----------|----------|----------|----------|----------|----------------| File | % Stmts | % Branch | % Funcs | % Lines |Uncovered Lines | -----------|----------|----------|----------|----------|----------------| All files | 100 | 50 | 100 | 100 | | Mikan.vue | 100 | 50 | 100 | 100 | 29,36 | -----------|----------|----------|----------|----------|----------------|