jestでNuxt.jsのテストを書く #jest #nuxtjs #vuejs

概要

Nuxt.jsで、jestというテスティングフレームワークを使って、コンポーネントのテストを書いてみました。

facebook.github.io

準備

※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 |
-----------|----------|----------|----------|----------|----------------|

ジムには乗りたい