JavaScript

【Jest】Nuxt.jsでテストコードを書いてみよう!【学習方法】

みなさん、こんにちは。どんぶラッコです。

みなさんはテストコードを記述しているでしょうか?

エンジニア初級者から中級者にレベルアップするにあたっての必須項目でもあると思います。

今回は、Nuxt.jsでのテストコードのセットアップ方法とその書き方の基礎についてご紹介していきたいと思います!

セットアップ手順

インストール時にセットアップする方法と手動で追加する方法があります。

npx create-nuxt-app 時に選択する

Choose test framework という選択項目で Jest または AVA を選択すると、インストール時をすると同時にセットアップをしてくれます。私の場合、Facebookが開発したフレームワークであるJestを利用しています。

$ npx create-nuxt-app test

create-nuxt-app v2.11.1
✨  Generating Nuxt.js project in test
? Project name test
? Project description My wicked Nuxt.js project
? Author name cha1ra
? Choose the package manager Yarn
? Choose UI framework None
? Choose custom server framework None (Recommended)
? Choose Nuxt.js modules (Press <space> to select, <a> to toggle all, <i> to invert selection)
? Choose linting tools (Press <space> to select, <a> to toggle all, <i> to invert selection)
? Choose test framework (Use arrow keys)
❯ None
  Jest
  AVA

手動でインストールをする

既に作ってしまったNuxtプロジェクトに手動で追加することもできます。

まずは、必要なモジュールをインストールしておきます。

yarn add -D jest vue-jest @vue/test-utils babel-jest
# または
# npm install --save-dev jest vue-jest @vue/test-utils babel-jest

続いて、プロジェクトのrootディレクトリ(nuxt.config.jsとかがあるディレクトリ階層)に jest.config.js を新規作成します。

module.exports = {
  moduleNameMapper: {
    '^@/(.*)$': '<rootDir>/$1',
    '^~/(.*)$': '<rootDir>/$1',
    '^vue$': 'vue/dist/vue.common.js'
  },
  moduleFileExtensions: ['js', 'vue', 'json'],
  transform: {
    '^.+\\.js$': 'babel-jest',
    '.*\\.(vue)$': 'vue-jest'
  },
  'collectCoverage': true,
  'collectCoverageFrom': [
    '<rootDir>/components/**/*.vue',
    '<rootDir>/pages/**/*.vue'
  ]
}

同じ階層に .babelrc も作成します.

{
  "env": {
    "test": {
      "presets": [
        [
          "@babel/preset-env",
          {
            "targets": {
              "node": "current"
            }
          }
        ]
      ]
    }
  }
}

最後に package.json にtestコマンドを追加します。

{
  "name": "test",
  ...
  "scripts": {
    ...
    "test": "jest"   // 追加
  },

ここまでできたらセットアップは完了です!

テストスクリプトを実行してみよう

では、早速テストを回してみましょう。

npx create-nuxt-appでインストールされた方はテストのサンプルも既に書かれています。 /testディレクトリに格納されていますね。

手動でセットアップされた方は、testというディレクトリを作成して、まずはsample.spec.jsという名前でテストファイルを作ってみましょう。

今回は、Logoコンポーネントが存在するかを確かめるテストです。

import { mount } from '@vue/test-utils'
import Logo from '@/components/Logo.vue'

describe('Logo', () => {
  test('コンポーネントが存在する', () => {
    // Logoコンポーネントをマウントする
    const wrapper = mount(Logo)
    // expect()の中身がtrueだったらテスト合格
    expect(wrapper.exists()).toBeTruthy()
  })
})

今回は sampleとしていますが、テストファイル名はテストするコンポーネント名に合わせた方が管理が楽です。

import Logo ...部分は、ご自身が作ったコンポーネントに合わせて書き換えてください。

nuxt-create-appコマンドでセットアップした方は、expectの部分が下記のようになっていると思います。

expect(wrapper.isVueInstance()).toBeTruthy()

2020年6月現在、 isVueinstance()は非推奨になるようなので、代わりにexists()で存在判定をするようにしましょう。

ここまでできたら、一度 yarn test ( または npm run test )コマンドを実行してみてください。

実行者の環境によって結果は異なりますが、こんな画面が出ていれば成功です。

このキャプチャの場合、1つのテストがOKで、1つのテストがNGということです。

テストを書くときによく使うTips

以上、基礎でした!

最後に、Nuxtでテストをかくときに使うTipsをいくつかご紹介して終わりにします。

Jestの使い方

そもそもJestの使い方がわかっていない…という人は、こちらの記事も参考にしてみてください♪

Vue Test Utils 公式ドキュメント

vueでテストをする場合は Vue Test Utils との関係は絶対外せません。

日本語版も用意があるので、ぜひ一読しておきましょう。

https://vue-test-utils.vuejs.org/ja/

Vuexを使いたい場合

ここら辺はまた詳しく書きたいと思います。

私は shallowMountと lodash の cloneDeepを組み合わせて適用させています。

import { shallowMount, createLocalVue } from '@vue/test-utils'
import Hoge from '@/components/Hoge'
import result from '@/store/sample'
import Vuex from 'vuex'
import { cloneDeep } from 'lodash'

const localVue = createLocalVue()

describe('Hoge', () => {
  let wrapper
  beforeEach(() => {
    localVue.use(Vuex)
    wrapper = shallowMount(Questionare, {
      localVue,
      store: new Vuex.Store(cloneDeep(sample))
    })
  })

  test('はVueインスタンスである', () => {
    expect(wrapper.exists()).toBeTruthy()
  })
})
```

query(params) を使いたい場合

整理しておくと、

  • query … /hoge/?query=hoge で取得できるやつ
  • params … /hoge/{params} で取得できるやつ

です。

これらは wrapperを発動させる際、mocksプロパティに設定することでテストで利用が可能になります。

// ...省略
describe('Hoge', () => {
  let wrapper
  beforeEach(() => {
    wrapper = shallowMount(Questionare, {
      localVue,
      mocks: {
        $route: {
          query: {
            id: 'hoge'
          }
        }
      }
    })
  })
  // ...省略
})

Vuetifyを使ってテストしたい場合

Vuetifyを使う場合は、beforeEach内でマウントをしてしまうとエラーが発生してしまいます。

なので、環境は汚れてしまいますが、グローバルでVueインスタンスに注入しておくとエラーが発生せずテストを回すことが可能です。

import { shallowMount, createLocalVue } from '@vue/test-utils'
import Hoge from '@/components/Hoge'

import Vue from 'vue'
Vue.use(Vuetify)
const localVue = createLocalVue()

describe('Hoge', () => {
  test('はVueインスタンスである', () => {
    expect(wrapper.exists()).toBeTruthy()
  })
})

みなさんもぜひチャレンジしてみましょう!

ABOUT ME
どんぶラッコ
ECコンサルタント、システムエンジニアを経て、quintet株式会社CTOに就任。普段はNuxt.jsやLaravelを使用しています。

\面白いと思ったら/

記事のシェア & Twitter のフォロー をお願いします!

@proglearn
RELATED POST

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です