Vue3のCompositionAPIの単体テスト方法を解説！CompositionAPI・TypeScript・UnitTestで堅牢開発

# Vue CLIプロジェクト新規作成
vue create vue3-unit-sample

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

module.exports = {
  root: true,
  env: {
    node: true,
  },
  extends: [
    "plugin:vue/vue3-essential",
    "eslint:recommended",
    "@vue/typescript/recommended",
    "@vue/prettier",
    "@vue/prettier/@typescript-eslint",
  ],
  parserOptions: {
    ecmaVersion: 2020,
  },
  rules: {
    "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
    "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
  },
  overrides: [
    {
      files: [
        "**/__tests__/*.{j,t}s?(x)",
        "**/tests/unit/**/*.spec.{j,t}s?(x)",
      ],
      env: {
        jest: true,
      },
    },
  ],
};

{
  "compilerOptions": {
    "target": "es5",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "importHelpers": true,
    "moduleResolution": "node",
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "baseUrl": ".",
    "types": [
      "webpack-env",
      "jest"
    ],
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "tests/**/*.ts",
    "tests/**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ]
}

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
  </div>
</template>

import { defineComponent } from "vue";

export default defineComponent({
  name: "HelloWorld",
  props: {
    msg: String,
  },
});

import { shallowMount } from "@vue/test-utils";
import HelloWorld from "@/components/HelloWorld.vue";

describe("HelloWorld.vue", () => {
  it("renders props.msg when passed", () => {
    const msg = "new message";
    const wrapper = shallowMount(HelloWorld, {
      props: { msg },
    });
    expect(wrapper.text()).toMatch(msg);
  });
});

<template>
  <input
    type="text"
    v-model="state.count"
    data-testid="inputCount"
    @keydown.prevent="onKeydown"
  />
</template>

import { defineComponent, reactive } from 'vue'

export default defineComponent({
  setup() {
    const state = reactive({
      count: 0,
    })

    const clear = () => {
      state.count = 0
    }

    const onKeydown = (e: KeyboardEvent) => {
      switch (e.code) {
        case 'ArrowUp':
          state.count = state.count + 5
          break;
        case 'ArrowDown':
          state.count = state.count - 5
          break;
        case 'ArrowRight':
          state.count = state.count + 1
          break;
        case 'ArrowLeft':
          state.count = state.count - 1
          break;
        default:
          clear()
          break;
      }
    }

    return {
      state,
      onKeydown,
    }
  },
})

import { shallowMount } from "@vue/test-utils";
import KeyCounter from "@/components/KeyCounter.vue";

describe('KeyCounter', () => {

  let wrapper: any;
  beforeEach(async () => {
    wrapper = shallowMount(KeyCounter);
  })

  // 初期化
  it('Count is zero by default', () => {
    expect(wrapper.vm.state.count).toBe(0)
  })

  it('Pressing the ArrowUp button, Count by +5', async () => {
    await wrapper.find('[data-testid="inputCount"]').trigger('keydown', { code: 'ArrowUp' });
    expect(wrapper.vm.state.count).toBe(5)
  })

  it('Pressing the ArrowDown button, Count by -5', async () => {
    await wrapper.find('[data-testid="inputCount"]').trigger('keydown', { code: 'ArrowDown' });
    expect(wrapper.vm.state.count).toBe(-5)
  })

  it('Pressing the ArrowRight button, Count by +1', async () => {
    await wrapper.find('[data-testid="inputCount"]').trigger('keydown', { code: 'ArrowRight' });
    expect(wrapper.vm.state.count).toBe(1)
  })

  it('Pressing the ArrowLeft button, Count by -1', async () => {
    await wrapper.find('[data-testid="inputCount"]').trigger('keydown', { code: 'ArrowLeft' });
    expect(wrapper.vm.state.count).toBe(-1)
  })

  it('Pressing the arrows button, Count by 0', async () => {
    wrapper.find('[data-testid="inputCount"]').trigger('keydown', { code: 'ArrowRight' });
    await wrapper.find('[data-testid="inputCount"]').trigger('keydown', { code: 'KeyA' });
    expect(wrapper.vm.state.count).toBe(0)
  })
})

npm run test:unit

npm run test:unit keyCounter.spec.ts

FAIL  tests/unit/keyCounter.spec.ts
  KeyCounter
    ✓ Count is zero by default (25ms)
    ✓ Pressing the ArrowUp button, Count by +5 (11ms)
    ✓ Pressing the ArrowDown button, Count by -5 (3ms)
    ✕ Pressing the ArrowRight button, Count by +1 (5ms)
    ✓ Pressing the ArrowLeft button, Count by -1 (2ms)
    ✓ Pressing the arrows button, Count by 0 (2ms)

  ● KeyCounter › Pressing the ArrowRight button, Count by +1

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

    Expected: 10
    Received: 1

      26 |   it('Pressing the ArrowRight button, Count by +1', async () => {
      27 |     await wrapper.find('[data-testid="inputCount"]').trigger('keydown', { code: 'ArrowRight' });
    > 28 |     expect(wrapper.vm.state.count).toBe(10)
         |                                    ^
      29 |   })
      30 |
      31 |   it('Pressing the ArrowLeft button, Count by -1', async () => {

      at tests/unit/keyCounter.spec.ts:28:36
      at step (node_modules/tslib/tslib.js:141:27)
      at Object.next (node_modules/tslib/tslib.js:122:57)
      at fulfilled (node_modules/tslib/tslib.js:112:62)

Test Suites: 1 failed, 1 total
Tests:       1 failed, 5 passed, 6 total
Snapshots:   0 total
Time:        3.796s
Ran all test suites matching /keyCounter.spec.ts/i.

PASS  tests/unit/keyCounter.spec.ts
  KeyCounter
    ✓ Count is zero by default (15ms)
    ✓ Pressing the ArrowUp button, Count by +5 (10ms)
    ✓ Pressing the ArrowDown button, Count by -5 (3ms)
    ✓ Pressing the ArrowRight button, Count by +5 (2ms)
    ✓ Pressing the ArrowLeft button, Count by -1 (2ms)
    ✓ Pressing the arrows button, Count by 0 (2ms)

Test Suites: 1 passed, 1 total
Tests:       6 passed, 6 total
Snapshots:   0 total
Time:        2.024s, estimated 5s
Ran all test suites matching /keyCounter.spec.ts/i