Nuxt.jsプロジェクトでjestにpower-assertを導入 #nuxtjs #powerassert

Nuxt.jsのテストをjestで書くというのを先日やってみたが、Assertionにpower-assertを使うようにする。

su-kun1899.hatenablog.com

power-assertの導入

babel連携が必要になるので、 power-assertに加えてbabel-preset-power-assertをインストールする。

$ npm install --save-dev babel-preset-power-assert power-assert

.babelrc のpresetsを追記する。

{
  "presets": [
    "power-assert"
  ]
}

Assertを書き換える

importして、assertを書き換えるだけ。

// assertをimportする
import assert from 'assert'
import { mount } from 'vue-test-utils'
import Mikan from '../../components/Mikan'

describe('Mikan', () => {

  test('name is みかん', () => {
    let wrapper　=　mount(Mikan)

    // Assertをpower-assertに置き換える
    // expect(wrapper.vm.name).toEqual('みかん')
    assert.equal(wrapper.vm.name, 'みかん')
  })
})

power-assertを書くと、失敗時の出力がとても分かりやすくなる。

assert(wrapper.vm.name === 'みかん')
        |       |  |    |
        |       |  |    false
        |       |  "りんご"

メソッドの時もいい感じ。

assert(wrapper.vm.calcAmount(count) === 108)
        |       |  |          |      |
        |       |  300        3      false