Vue3で保守性の高いテストコード作成方法を解説！Vue3エンジニアが実装とテストの疎結合実装方法を解説！

$ vue create hello-world
Vue CLI v4.5.13
? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, TS, Linter, Unit
? Choose a version of Vue.js that you want to start the project with 3.x
? Use class-style component syntax? No
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? No
? Pick a linter / formatter config: Basic
? Pick additional lint features: Lint on save
? Pick a unit testing solution: Jest
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? No

module.exports = {
  preset: '@vue/cli-plugin-unit-jest/presets/typescript',
  transform: {
    '^.+\\.vue$': 'vue-jest'
  }
}

<template>
  <div>
    <div class="message">{{ uppercasedMessage }}</div>
    <div class="count">
      Count: {{ state.count }}
    </div>
    <button @click="increment">+</button>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, computed } from 'vue'

export default defineComponent({
  props: {
    message: {
      type: String
    }
  },

  setup(props) {
    const state = reactive({
      count: 0
    })

    const increment = () => {
      state.count += 1
    }

    return {
      state,
      increment,
      uppercasedMessage: computed(() => props.message?.toUpperCase())
    }
  },
})
</script>

import { shallowMount } from '@vue/test-utils'
import Counter from '@/components/Counter.vue'

describe('Counter.vue', () => {

  // propsでの文字列表示
  it('renders a uppercase message', () => {
    const message = 'hoge'
    const wrapper = shallowMount(Counter, {
      props: { message }
    })
    // 表示箇所の文字列のチェック
    expect(wrapper.find(".message").text()).toBe('HOGE')
  })

  // ボタンクリックでのインクリメント
  it('increments a count when button is clicked', async () => {
    const message = 'hoge'
    const wrapper = shallowMount(Counter, {
      props: { message }
    })

    // クリックイベント発火
    await wrapper.find('button').trigger('click')

    // カウント表示箇所のチェック
    expect(wrapper.find('.count').text()).toBe('Count: 1')
  })

})

# テスト実行
$ yarn test:unit
PASS  tests/unit/Counter.spec.ts
  Counter.vue
    ✓ renders a uppercase message (76ms)
    ✓ increments a count when button is clicked (31ms)

Test Suites: 1 passed, 1 total
Tests:       2 passed, 2 total
Snapshots:   0 total
Time:        4.33s
Ran all test suites.
✨  Done in 7.61s.

FAIL  tests/unit/Counter.spec.ts (6.304s)
  Counter.vue
    ✕ renders a uppercase message (58ms)
    ✓ increments a count when button is clicked (13ms)

  ● Counter.vue › renders a uppercase message

    expect(received).toBe(expected) // Object.is equality

    Expected: "HOGE"
    Received: "Count: 0"

      10 |     })
      11 |     // 表示箇所の文字列のチェック
    > 12 |     expect(wrapper.find(".count").text()).toBe('HOGE')
         |                                           ^
      13 |   })
      14 |
      15 |   // ボタンクリックでのインクリメント

      at Object.<anonymous> (tests/unit/Counter.spec.ts:12:43)

Test Suites: 1 failed, 1 total
Tests:       1 failed, 1 passed, 2 total
Snapshots:   0 total
Time:        7.511s
Ran all test suites.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

import { reactive, computed } from '@vue/composition-api';

export default (defaultCount = 0) => {
  const state = reactive({
    defaultCount
  })
  const count = computed(() => state.defaultCount)
  const increment = () => {
    state.defaultCount += 1
  }
  const decrement = () => {
    state.defaultCount -= 1
  }
  return {
    count,
    increment,
    decrement
  }
}

import VueCompositionApi from '@vue/composition-api';
import { createLocalVue } from '@vue/test-utils';
import counter from '@/composition/counter';

const localVue = createLocalVue();
localVue.use(VueCompositionApi)

describe("counter", ()=> {
   test("increment", ()=> {
      const {count, increment} = counter(10)
      expect(count.value).toEqual(10)
      increment()
      expect(count.value).toEqual(11)
   })
   test("decrement", ()=> {
      const {count, decrement} = counter(10)
      expect(count.value).toEqual(10)
      decrement()
      expect(count.value).toEqual(9)
   })
})