NuxtでTypeScriptを使うときのVeux.storeの設定方法で作成したプロジェクトに Jest でのユニットテストをつけていきます。
できあがったものは以下のリポジトリになります。
https://github.com/TAC/nuxt-vuex-typescript-jest-example
Jestの追加
Nuxt を新規作成時のオプションでテストフレームワークに Jest を選択すると自動で追加されますが、それらを手動で追加してみます。
yarn add -D jest vue-jest babel-jest ts-jest eslint-plugin-jest @vue/test-utils babel-core@^7.0.0-bridge.0
Babelのバージョンが7になっているのでbabel-core@^7.0.0-bridge.0 が必要になります。
Vuex.StoreがTypeScriptなのでts-jestも追加します。
Jestの設定
jest.config.js と .babelrc を以下の内容で追加します。
app/jest.config.ts
module.exports = {
moduleNameMapper: {
'^vue$': 'vue/dist/vue.common.js',
'^@/(.*)$': '<rootDir>/$1',
'^~/(.*)$': '<rootDir>/$1'
},
moduleFileExtensions: ['js', 'ts', 'vue'],
transform: {
'^.+\\.js$': 'babel-jest',
'^.+\\.ts$': 'ts-jest',
'^.+\\.vue$': 'vue-jest'
},
collectCoverage: false,
collectCoverageFrom: [
'<rootDir>/components/**/*.vue',
'<rootDir>/pages/**/*.vue',
'<rootDir>/store/**/*.ts'
]
}
.babelrc
{
"env": {
"test": {
"presets": [
[
"@babel/preset-env",
{
"targets": {
"node": "current"
}
}
]
]
}
}
}
テストの作成
コンポーネントのテスト
まずはコンポーネントのテストから。
import Vuex from 'vuex'
import { cloneDeep } from 'lodash'
import { createLocalVue, mount } from '@vue/test-utils'
import Counter from '@/components/Counter.vue'
import counter from '@/store/modules/counter.ts'
const localVue = createLocalVue()
localVue.use(Vuex)
describe('components/Counter.vue', () => {
let wrapper
const initValue = 10
beforeEach(() => {
// create store
const store = new Vuex.Store({
'modules': {
'modules/counter': cloneDeep(counter)
}
})
// initialize store
store.commit('modules/counter/SET_VALUE', initValue)
// mount Vue Component
wrapper = mount(Counter, {
store: store,
localVue
})
})
describe('template', () => {
test('snapshot correctly', () => {
expect(wrapper.element).toMatchSnapshot()
})
})
describe('script', () => {
test('get counter value correctly', () => {
expect(wrapper.vm.counter).toBe(initValue)
})
test('increment button correctly', () => {
wrapper.find('[name="increment"]').trigger('click')
expect(wrapper.vm.counter).toBe(initValue + 1)
})
test('decrement button correctly', () => {
wrapper.find('[name="decrement"]').trigger('click')
expect(wrapper.vm.counter).toBe(initValue - 1)
})
})
})
@vue/test-utilsのcreateLocalVueを使ってローカルコピーを作成しておきます。
Vuex.Storeには使用するstoreの定義をmodulesの該当パスにcloneDeepでコピーしてあげます。
そうすることで他のテスト時に値が汚染されなくなります。
あとは好きなテストを記述していきます。
wrapper.find()にはCSSセレクターを指定できるので、テスト対象のエレメントなどが一意になるようにnameやclassを設定しておくと探しやすくなります。
Veux.Storeのテスト
次はstoreのテストです。
import Vuex from 'vuex'
import { cloneDeep } from 'lodash'
import { createLocalVue } from '@vue/test-utils'
import counter from '@/store/modules/counter.ts'
const localVue = createLocalVue()
localVue.use(Vuex)
describe('store/modules/counter.ts', () => {
let store
const initValue = 10
beforeEach(() => {
// create store
store = new Vuex.Store({
'modules': {
'modules/counter': cloneDeep(counter)
}
})
// initialize store
store.commit('modules/counter/SET_VALUE', initValue)
})
describe('getters', () => {
test('get value correctly', () => {
expect(store.getters['modules/counter/value']).toBe(initValue)
})
})
describe('actions', () => {
test('increment correctly', () => {
const addValue = 1
store.dispatch('modules/counter/increment', addValue)
expect(store.getters['modules/counter/value']).toBe(initValue + addValue)
})
test('decrement correctly', () => {
const subValue = 1
store.dispatch('modules/counter/decrement', subValue)
expect(store.getters['modules/counter/value']).toBe(initValue - subValue)
})
})
})
ほぼコンポーネントと同じですが、作成したstoreを使用してテストしたいactionsなどを実行していく形になります。
package.jsonに以下のスクリプトを追加します。
"test": "jest",
"test:coverage": "jest --coverage",
これで準備が整ったので、yarn testを実行すると以下のような結果が得られると思います。
PS C:\work\repos\nuxt\jest\app> yarn test
yarn run v1.15.2
$ jest
$ C:\work\repos\nuxt\jest\app\node_modules\.bin\jest
PASS tests/store/modules/counter.test.js
PASS tests/components/Counter.test.js
Test Suites: 2 passed, 2 total
Tests: 7 passed, 7 total
Snapshots: 1 passed, 1 total
Time: 3.831s
Ran all test suites.
Done in 5.54s.
テストカバレッジも見たい時はtest:coverageを実行します。
PS C:\work\repos\nuxt\jest\app> yarn test:coverage
yarn run v1.15.2
$ jest --coverage
$ C:\work\repos\nuxt\jest\app\node_modules\.bin\jest --coverage
PASS tests/store/modules/counter.test.js
PASS tests/components/Counter.test.js
---------------|----------|----------|----------|----------|-------------------|
File | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s |
---------------|----------|----------|----------|----------|-------------------|
All files | 65.38 | 100 | 87.5 | 65.22 | |
components | 71.43 | 100 | 100 | 71.43 | |
Counter.vue | 100 | 100 | 100 | 100 | |
Logo.vue | 0 | 100 | 100 | 0 | 10,13 |
pages | 0 | 100 | 100 | 0 | |
index.vue | 0 | 100 | 100 | 0 | 8,9,10,18 |
store | 0 | 100 | 0 | 0 | |
index.ts | 0 | 100 | 0 | 0 | 1,3 |
store/modules | 100 | 100 | 100 | 100 | |
counter.ts | 100 | 100 | 100 | 100 | |
---------------|----------|----------|----------|----------|-------------------|
Test Suites: 2 passed, 2 total
Tests: 7 passed, 7 total
Snapshots: 1 passed, 1 total
Time: 10.346s
Ran all test suites.
Done in 11.68s.
Written with StackEdit.
