みなさん、こんにちは。どんぶラッコです。
みなさんはテストコードを記述しているでしょうか？
エンジニア初級者から中級者にレベルアップするにあたっての必須項目でもあると思います。
今回は、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()
})
})みなさんもぜひチャレンジしてみましょう！
[…] […]