Ryo.gift | Web developer blog

Web開発者のブログです。

Vue.jsで簡単なテストを書いてみる

Vue.jsによって、生成されたDOMの結果を確認する。

<!-- src/components/Sample.vue -->
<template>
  <div class="sample">
    <p>sample</p>
  </div>
</template>

<script>
export default {
  name: "Sample"
}
</script>

<style scoped>
.sample {
  text-align: center;
}
</style>
// tests/unit/components/Sample.spec.js
import { shallowMount } from "@vue/test-utils"
import Sample from "@/components/Sample.vue"

describe("Sample.vue", () => {
  it("sampleの文字列が描画されること", () => {
    const wrapper = shallowMount(Sample)
    expect(wrapper.text()).toMatch("sample")
  })
})
$ npm run test:unit                 
> vue-cli-service test:unit

 PASS  tests/unit/components/Sample.spec.js
  Sample.vue
    ✓ sampleの文字列が描画されること (25ms)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        3.457s
Ran all test suites.