JestΛ࢖ͬͯ VueίϯϙʔωϯτͱVuexετΞͷ ςετίʔυΛॻ͍ͯΈΑ͏! karamage 2019.6.24 Ginza.js#2

ࣗݾ঺հ

ɾϑϦʔϥϯεͷΤϯδχΞʢΞϓϦ։ൃಘҙʣ karamage IUUQTUXJUUFSDPNLBSB@NBHF ݸਓΞϓϦଟ਺ϦϦʔε

”ָ͔͕ͯͨ͘͠͠ͳ͍”৬৔Ͱಇ͍ͯ·͢ IUUQTFOHJOFFSPDUDPKQ

͔͜͜Βຊ୊

࿩͍ͨ͜͠ͱɹ4ͭ • ςετ͸ԿͷͨΊʹॻ͘ͷ͔ • Jest ηοτΞοϓ • Vueίϯϙʔωϯτͷ୯ମςετ • VuexετΞͷ୯ମςετ IUUQTHJUIVCDPNLBSBNBHFWVF@KFTU@UFTU εϥΠυ಺ͷίʔυ

ςετ͸ԿͷͨΊʹॻ͘ͷ͔

JavaScriptͷ ςετίʔυॻ͍͍ͯ·͔͢?

΋͠ɺςετΛॻ͍ͯͳ͍ͱ

͕͢͞ʹౖΒΕΔ>< ৗࣝతʹߟ͑ͯςετॻ͔ͳ͍ͱϠόΠงғؾ

ςετίʔυΛॻ͔ͳ͍ཧ༝ ɾॻ͖ํ͕Θ͔Βͳ͍ ɾΊΜͲ͍ ɾٛ຿ײɺ΍Β͞Εײ͕͋Δ ɾςετΛॻ͘ҙ͕ٛΘ͔Βͳ͍

ɾ඼࣭Λ୲อ͢Δ ɾςετࣗಈԽͰίετΛԼ͛Δ ɾෆ҆ΛऔΓআ͘ ɾมԽʹڧ͘͢Δ ςετΛॻ͘ҙٛͱ͸ ɾɾɾ;Ή;Ήɹɹɹ ͍ͬΆ͏ɺt_wada͞Μᐌ͘

Ѫͤͳ͍ίʔυΛॻ͘ʹ͸ ਓੜ͸͋·Γʹ΋୹͍ ࿨ా୎ਓ @t_wada

ίʔυΛѪ͢ΔͨΊʹ ςετΛॻ͜͏

͍·ɺ͜ͷॠؒ ίʔυʹɺ޲͖߹͑Δ ػձʹɺͨͩɺͨͩ ײँ…

Ѫ͕͋Δײँͷdeploy ςετΛॻ͘ͷ͸ɺѪͷ֬ೝ࡞ۀ

JestΛΠϯετʔϧ͠Α͏

Jest Facebook੡ͷJSςετϓϥοτϑΥʔϜ JSςετքͷγΣΞ཰φϯόʔ1 [ಛ௃] • ϒϥ΢βͷىಈ͕ͳ͍ͿΜܰշʹಈ͘(DOMͷΤϛϡ) • εφοϓγϣοτςετ(Ծ૝DOMΛJSONͰμϯϓͯࠩ͠෼ൺֱ)͕Ͱ͖Δ • ςετʹඞཁͳػೳશ෦ೖΓͰָʢςετϥϯφʔɺΞαʔγϣϯɺϞοΫɺΧόϨοδʣ • ઃఆҰͭͰΧόϨοδΛ؆୯ʹऔಘͰ͖Δ • ΢ΥονͰϑΝΠϧมߋ࣌ʹґଘؔ܎ͷ͋Δςετ͚ͩ૸Δɻݡ͍ɻ vue-test-utils vueͷςετ࣌ʹศརͳUtil vueίϯϙʔωϯτͷmountॲཧͯ͘͠ΕΔ Jestͱvue-test-utilsͱ͸? ศར͗ͯ͢ ࢖Θͳ͍ཧ༝͕ͳ͍

NuxtʹJestΛೖΕͯΈΔ ಈ࡞؀ڥ ɾNuxt v2.8.1 ɾVue v2.6.10 ɾNode v10.15.3

Jest ͱvue-test-utilsΠϯετʔϧ $ yarn add --dev jest vue-jest babel-jest @vue/test- utils babel-preset-vue-app "scripts": { ..., "test": "jest" }, QBDLBHFKTPO

Jest ͱvue-test-utilsηοτΞοϓ { "env": { "test": { "presets": [ [ "@babel/preset-env", { "targets": { "node": "current" } } ] ] } } } CBCFMSD module.exports = { moduleNameMapper: { '^@/(.*)$': '/$1', '^~/(.*)$': '/$1', '^vue$': 'vue/dist/vue.common.js' }, moduleFileExtensions: ['js', 'vue', 'json'], transform: { '^.+\\.js$': 'babel-jest', '.*\\.(vue)$': 'vue-jest', }, "collectCoverage": true, "collectCoverageFrom": [ "/components/**/*.vue", "/pages/**/*.vue" ] } KFTUDPOpHKT

Jest ࣮ߦ! $ yarn test Θ͘Θ͘

BabelͷΤϥʔͰϋϚΔ ٽ͖ͦ͏ʹͳΔʼʻ

jest-babel, vue-jest ͷIsuueΛಡΜͰ babel-coreͷόʔδϣϯΛ ௐ੔ͨ͠Β͍͚ͨ $ yarn add --dev babel-jest babel-core@^7.0.0-0 @babel/core IUUQTHJUIVCDPNWVFKTWVFKFTUJTTVFT IUUQTHJUIVCDPNGBDFCPPLKFTUJTTVFT

ςετίʔυΛॻ͍ͯΈΑ͏

ςετͷॻ͖ํͷجຊ@Jest export function sum(x, y) { return x + y } import { sum } from "@/logic/sum" test("1 + 2 = 3", () => { expect(sum(1, 2)).toBe(3) }) MPHJDTVNKT UFTUTVNUFTUKT

Jestͷجຊ • test(name, fn)Ͱ୯ҰͷςετΛද͢ɻ • it(name, fn)Ͱ΋ಉ͡ҙຯɻrspecత • expect(value) Ͱςετର৅ͷ஋ΛೖΕΔ • toBe(value) Ͱ݁Ռͷ஋ͷݕূΛߦ͏

Vueίϯϙʔωϯτ ͷ୯ମςετΛॻ͜͏ Vuex࢖Θͳ͍৔߹

Vueίϯϙʔωϯτ(ςετର৅) export default { data() { return { count: 0 } }, methods: { increment() { this.count++ } } } DPNQPOFOUT$PVOUFSWVF ϘλϯΛԡ͢ͱΧ΢ϯτΞοϓ͢Δ ̍

Vueίϯϙʔωϯτͷςετ import { mount } from '@vue/test-utils' import Counter from '@/components/Counter' describe('Counter', () => { // ίϯϙʔωϯτ͕Ϛ΢ϯτ͞Εɺϥού͕࡞੒͞Ε·͢ɻ const wrapper = mount(Counter) it('renders the correct markup', () => { expect(wrapper.html()).toContain('0') }) // ཁૉͷଘࡏΛ֬ೝ͢Δ͜ͱ΋؆୯Ͱ͢ it('has a count label', () => { expect(wrapper.contains(‘.count')).toBe(true) }) // ϘλϯΛԡͯ͠Χ΢ϯτΞοϓ͢Δςετ it('button click should increment the count', () => { expect(wrapper.vm.count).toBe(0) const button = wrapper.find('button') button.trigger(‘click') expect(wrapper.vm.count).toBe(1) }) }) UFTU$PVOUFSTQFDWVF JE΍DMBTTͷ$44ηϨΫλΛࢦఆ͢Δ͜ͱ΋Մೳ )5.-Λจࣈྻͱͯ͠νΣοΫ͢Δ ͨͩɺ$44ʹґଘͨ͠ςετ͸ඍົɻEBUBUFTUଐੑΛ࢖͏΂͠ WNDPVOU͕Χ΢ϯτΞοϓ͍ͯ͠Δ͜ͱΛ֬ೝ

Vueίϯϙʔωϯτͱ VuexετΞͷ ୯ମςετΛॻ͜͏

Vueίϯϙʔωϯτ(ςετର৅) import { mapGetters, mapActions } from "vuex" export default { computed: { ...mapGetters("count", ["count"]) }, methods: { ...mapActions("count", ["increment"]) } } DPNQPOFOUT$PVOUFS7VFYWVF σʔλ͸ετΞʹ࣋ͭ

VuexετΞ(ςετର৅) export const state = () => ({ count: 0 }) export const mutations = { setCount: (state, { count }) => state.count = count } export const getters = { count: state => state.count, } export const actions = { async increment({ commit, state }, {}) { commit("setCount", { count: state.count + 1 }) }, } TUPSFDPVOUKT

import Vuex from 'vuex' import * as count from '@/store/count' import { createLocalVue } from '@vue/test-utils' const localVue = createLocalVue() localVue.use(Vuex) let action const testedAction = (context = {}, payload = {}) => { return count.actions[action](context, payload) } describe('store/count.js', () => { let store beforeEach(() => { store = new Vuex.Store(count) }) describe('getters', () => { test('countͷ஋Λऔಘ', () => { store.replaceState({ count: 3 }) expect(store.getters['count']).toBe(3) }) }) describe('actions', () => { let commit let state beforeEach(() => { commit = store.commit state = store.state }) test('increment', async done => { action = "increment" await testedAction({ commit, state }) expect(store.getters['count']).toBe(1) await testedAction({ commit, state }) expect(store.getters['count']).toBe(2) done() }) }) VuexετΞͷ୯ମςετ UFTUTUPSFDPVOUTQFDKT ଞͷςετʹӨڹΛ༩͑ͳ͍Α͏ʹ ඇಉظͷςετ͸͜ͷΑ͏ʹॻ͘ EPOF๨ΕΔͳ ςετͷ౓ʹετΞΛॳظԽ TUBUF͕มΘͬͨͱ͖ HFUUFSͰऔಘͰ͖͍ͯΔ͔֬ೝ JODSFNFOUΛݺΜͩΒ Χ΢ϯτΞοϓ͍ͯ͠Δ͔֬ೝ

import { shallowMount, createLocalVue } from '@vue/test-utils' import Vuex from 'vuex' import CounterVuex from '@/components/CounterVuex' const localVue = createLocalVue() localVue.use(Vuex) describe('CounterVuex.vue', () => { let store let countStoreMock let wrapper beforeEach(() => { //VuexετΞͷϞοΫΛ࡞੒͢Δ countStoreMock = { namespaced: true, actions : { increment: jest.fn(), }, getters : { count: () => 0, }, } store = new Vuex.Store({ modules: { count:countStoreMock } }) // shallowMountͩͱࢠίϯϙʔωϯτΛελϒʹΑͬͯඳը͠ͳ͘ͳΔ(ߴ଎Խ) wrapper = shallowMount(CounterVuex, { store, localVue }) }) VuexΛ࢖͏ Vueίϯϙʔωϯτͷ୯ମςετ UFTU$PVOU7VFYTQFDKT ɾɾˣ࣍ϖʔδʹଓ͘ lίϯϙʔωϯτzͷ୯ମςετͳͷ ͰɺετΞ͸ϞοΫʹஔ͖׵͑Δ

it('renders the correct markup', () => { expect(wrapper.html()).toContain('0') }) // ཁૉͷଘࡏΛ֬ೝ͢Δ͜ͱ΋؆୯Ͱ͢ it('has a button', () => { expect(wrapper.contains('button')).toBe(true) }) // ϘλϯΛԡͯ͠inclement͕ݺͼग़͞Ε͍ͯΔ͔ςετ it('button click should increment call', () => { expect(countStoreMock.actions.increment).not.toBeCalled() const button = wrapper.find('button') button.trigger('click') expect(countStoreMock.actions.increment).toBeCalled() }) }) VuexΛ࢖͏Vueίϯϙʔωϯτͷ୯ମςετ UFTU$PVOU7VFYTQFDKT ϘλϯΛԡͨ͠ͱ͖ϞοΫͷJODSFNFOU͕ ݺͼग़͞Ε͍ͯΔ͔֬ೝ

·ͱΊ ɾςετΛॻ͍ͨίʔυ͸Ѫ͕͋Δ ɾJest ͸͍͍ͧ ɾετΞͱίϯϙʔωϯτ͸੹຿Λ੾Γ෼͚ͯ ୯ମςετ͠Α͏

Thanks! ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠