Vue.jsでテスト可能なコンポーネント開発を行うためのヘッドレステスト法

npm install --save-dev @vue/test-utils jest

module.exports = {
  preset: '@vue/cli-plugin-unit-jest'
}

<template>
  <button @click="increment">{{ count }}</button>
</template>
<script>
export default {
  data() {
    return { count: 0 }
  },
  methods: {
    increment() {
      this.count++
    }
  }
}
</script>

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

test('increments count when button is clicked', () => {
  const wrapper = mount(Counter)
  wrapper.find('button').trigger('click')
  expect(wrapper.text()).toContain('1')
})

test('renders prop value correctly', () => {
  const wrapper = mount(Counter, {
    props: { initialCount: 5 }
  })
  expect(wrapper.text()).toContain('5')
})

test('emits an event when clicked', () => {
  const wrapper = mount(Counter)
  wrapper.vm.$emit('increment')
  expect(wrapper.emitted('increment')).toBeTruthy()
})

test('matches snapshot', () => {
  const wrapper = mount(Counter)
  expect(wrapper.html()).toMatchSnapshot()
})

const puppeteer = require('puppeteer')
test('renders page title', async () => {
  const browser = await puppeteer.launch()
  const page = await browser.newPage()
  await page.goto('http://localhost:8080')
  const title = await page.title()
  expect(title).toBe('My App')
  await browser.close()
})

jest.mock('@/api', () => ({
  fetchData: () => Promise.resolve('mock data')
}))

test('handles async data correctly', async () => {
  const wrapper = mount(Counter)
  await wrapper.vm.loadData()
  expect(wrapper.text()).toContain('mock data')
})

test('displays error message on failure', async () => {
  const wrapper = mount(Counter)
  await wrapper.vm.loadDataWithError()
  expect(wrapper.text()).toContain('Error occurred')
})

test('parent-child communication works', () => {
  const parentWrapper = mount(ParentComponent)
  const childWrapper = parentWrapper.findComponent(ChildComponent)
  childWrapper.vm.$emit('childEvent')
  expect(parentWrapper.text()).toContain('Child Event Triggered')
})