はしがき

最近、結婚披露宴を行い、そこでスライドショーアプリを自作しました。
詳細はこちら。

このアプリはNode.jsとVue.jsで作っており、jestでテストコードを書いています。
本記事では、その時の知見をまとめました。

JavaScriptテストコードの基本

テストコードの構造は基本的には以下のように書きます

sample.test.js

describe('sample test', () => {
    test('test1', () => {
        // テスト処理
    })

   test('test2', () => {
        // テスト処理
    })
})

テスト時には、test関数内の処理が実行され、結果のチェックを行います。describe関数は複数のtestをグルーピングします。
サンプルソース例を結構見てみましたが、test関数を直に書いているサンプルはなかったので、describe関数から定義するのがお作法なようです。

Jestの他にもJavaScriptのユニットテストフレームワークは存在します。mocha+chai、karma+jasmine、などが有名なようです。

ただ、今回テストを行うソースがNode.js環境だったので、親和性の高いJestを採用しています。

Jest de テストコード - mock編

ユニットテストを行うにあたって、真っ先に障壁になるもの。
それは、requireやimportしている他ファイルの処理です。

例えば、fsをrequireしているソースをテストする場合を考えます。操作するファイルが本番環境以外で取得できない(API経由で取得するなど)場合、テスト時に実際のfsの関数が実行されてしまうのはよろしくないです(ファイルがあったとしても関数を実行するべきではないですが)。

そこで、requireされるfsをモック化します。

mockファイルの生成

npmパッケージをモック化する場合、node_moduleと同じディレクトリに__mock__という名前でディレクトリを作り、その中にrequireされる名前と同じ名前のjsファイルを置きます。
__mock__ディレクトリが存在していた場合、テストコード実行時にjestはまず__mock__ディレクトリを探し、そこに定義がなければnpmパッケージの処理を実行します。ですので、__mock__内に定義しておけばモック化することができます。

your-project
├── node_modules
│   └── fs
└── __mock__
    └── fs

この__mock__配下のfsにモックコードを書きます。

下記はfs.mkdirSync関数のモック化例です。

__mock__/fs.js

// モック元ファイルの指定
const fs = jest.genMockFromModule('fs')

// ディレクトリ作成関数mkdirSyncのモック記述
function mkdirSync(directoryPath) {
  var file = { directoryPath: 'dummy' }
}

// モック関数の登録
fs.mkdirSync = mkdirSync

module.exports = fs;

こうすることで、テスト対象コード内でfs.mkdirSyncの処理があった場合、モック化した関数のみを実行してくれます。

一部関数のみのモック化

ただ、わざわざmockファイルを作る必要はないケースというのもあります。
例えば、テスト対象コード内で一度だけしか呼ばれない別ファイルの関数の処理をmock化したいとか、一つのテストケース内でしか呼ばれないとか言った場合です。

以下はmyApp.jsというファイルのテストコード内で、myModule.jsのfuncAという関数をsample testというテストケースの中でのみモック化する場合のサンプルです。

myApp.test.js

const myApp = require('../myApp')
import myModuleMock from 'DIRECTORY_PATH/myModule'

describe('all test', () => {
  test('sample test', () => {
    // mock関数の定義
    const spy = jest.spyOn(myModuleMock, 'funcA').mockImplementation(() => {
        return true
      })
    
    // テスト実行
    myApp.exec()
    
    // mock関数がテスト内でコールされたか
    expect(spy).toHaveBeenCalled()
  })
})

注意しなければいけないのが、spyOn()で登録した関数は、あくまで関数が呼ばれたかどうかの状態を監視する役目しか持たないということです。
つまり、ただspyOn()しただけだと、実際のmyModule.funcAもコールされてしまいます。
これをモック化するためには、mockImplementationの記述を追加し、モック処理を書く必要があります。
これで関数単位のモック化ができます。

Jest de テストコード - Vue.js編

正直難しいものはないです。
まずはVueのテスト用パッケージインストールします。

npm install --save-dev @vue/test-utils

あとはテストコードにインポートして、以下の通り書けばVueコンポーネントのテストが実施できます。

以下は、Startという名前のコンポーネントのテストコードです。

// 子コンポーネントがある場合、shallowMountで定義
import {shallowMount} from '@vue/test-utils'
import Start from '@/components/Start'

wrapper = shallowMount(Start, {
  mocks: { $router: router }
})

test('sample test', () => {
  // Vueインスタンスかどうか確認する
  expect(wrapper.isVueInstance()).toBeTruthy()
	
  // templateのDOM要素をclassで指定し、アクションを行う
  wrapper.find('.opening_content').trigger('click')

  // 関数実行する場合、.vm.funcでコール
  wrapper.vm.getImageJson()

  // data要素を取得
  wrapper.vm.$data.showNum

  // emitイベント呼び出し
  wrapper.emitted('startSlideShow')
})

他コンポーネントとのやり取りについては、インスタンス宣言時、モック化させることができます。