◆当ページにはプロモーションが含まれています

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の使い方がわかっていない…という人は、こちらの記事も参考にしてみてください♪

https://proglearn.com/2019/10/19/node-js-%e3%81%a7%e3%83%86%e3%82%b9%e3%83%88%e3%82%92%e8%a1%8c%e3%81%86%e3%81%ab%e3%81%afjest%e3%81%8c%e4%be%bf%e5%88%a9%ef%bc%81-jest%e3%81%ae%e4%bd%bf%e3%81%84%e6%96%b9%e5%85%a5%e9%96%80/
https://proglearn.com/2019/11/30/jest-%e3%83%81%e3%83%bc%e3%83%88%e3%82%b7%e3%83%bc%e3%83%88-javascript%e3%81%a7%e3%83%86%e3%82%b9%e3%83%88%e3%82%92%e6%9b%b8%e3%81%93%e3%81%86/

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()
  })
})

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

エンジニアにおすすめ転職サイト

マイナビIT AGENT
迷ったらまずはココ。求人数が多いため希望や条件にマッチする求人が見つかる!

レバテックキャリア
担当者のレベルが高い。エンジニア特化で15年の実績がある実績で初回提案での内定率驚異の90%!

JOIN
副業やフリーランスとして高額報酬案件を見つけるならJOIN。未経験者でも案件獲得実績豊富が強み!

\面白いと思ったら/

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

@proglearn
一緒によく読まれている記事

COMMENT

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