ユニットテストでVueプロジェクトを作成するには時間がかかったことはありますか?
開始する前に、我々はどのような単位テストを使用する利点が表示されます.

それはあなたの自信を高める!実際には、specと呼ばれるテストは、既存のコードを壊すことなく、新しい機能を追加することができます.

それはプロジェクトに関連する開発者によって使用され、アプリケーションのドキュメントのような仕様を考慮することができます.

あなたが生産するコードの品質は、

を改善することができるだけです
始めましょう、我々はプロジェクトを作成することから始めます、それはおよそ2分かかります.

vue create vue-3-test-unit && cd vue-3-test-unit

私が選んだ特徴は

テストのパターンを選択する

あなたのテストを整理するパターンの多くを見つける.

おすすめのパターン

私は個人的に次のパターンを使用します.利点はすべてのテストがテスト/単位フォルダにあるということです.

tests/
├─ unit/
│  ├─ assets
│  ├─ components
│  ├─ js
│  ├─ router
│  ├─ store
│  ├─ views
│  ├─ App.test.js

このパターンを取得するには、次のコマンドを実行します.

mkdir tests/unit/assets
mkdir tests/unit/components
mkdir tests/unit/router
mkdir tests/unit/store
mkdir tests/unit/views
mv tests/unit/example.spec.js tests/unit/App.spec.js

その他のパターン

興味があるならば、あなたはパターンの他の何かの下記を見つけます:

src/
├─ components/
│  ├─ navbar.js
│  ├─ navbar.style.js
│  └─ navbar.test.js

src/
├─ components/
├─ __tests__/
│  │  └─ navbar.test.js
│  └─ navbar.js

テスト/仕様構文

次のコマンドを試してみましょう

npm run test:unit

下記のように、テストの結果が表示されます.

解説

テスト・スイートは、グループ化されたテストの一種である

です

試験は、テスト

の数を示します

スナップショットを使用すると、全体のコンポーネントが必要に応じて実行されることを確認するために使用され、それはまた、統合テストとして使用される
緑で「パス」を見ることができます.テストが失敗した場合は、“失敗”赤で取得します.

テストの仕方を理解する

アプリを開きましょう.Spec . jsファイルので、どのように動作を理解することができます.以下のコードを説明しました.

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)
  })
})

なぜ我々は輸入を行う必要がありますか？

VUEアプリケーションをDOM要素にマウントする必要があるので、Vueをマウントする必要があります.テストするファイル.
たとえば、HelloWorld上でテストを実行したい場合.Vueページ、我々はインポートする必要があります.これを行うには2つの方法があります.

マウント

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

浅瀬

マウントのように、マウントされてレンダリングされたVueコンポーネントを含むラッパーを作成しますが、スタブ付きの子コンポーネントで使用することができます.

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

説明したテストの構文

テストを書くには、どうすればよいかを知る必要があります.

テストスイート:それを行うために'記述'を使用して、

テスト:使用'テスト'または' it '

あなたのテストのゴール:「期待」は、あなたがテスト

の予想であることを定めるのを許します

記述

記述は明確でなければなりません、我々はテストされたコンポーネント名または関数名を使用します.
あなたがES 6を使いたいならば

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

})

ES 6なしで:

describe('HelloWorld.vue', function()  {

})

期待する

このテストの記述を入れた後、我々は期待で使用される変数を準備します.

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

このテストはHelloWorldのDOMを意味します.Vueページには、小道具' msg 'によって'新しいメッセージ'を含んでいるテキストがなければなりません.

最初のテストを書く

この時点で、いくつかの方法でプロジェクトを管理できます.

コードを最初にテストします.最初にコンポーネントをコード化し、テストを追加できます.

のテストの最初の、コード後:あなたは最初のテストを追加することができますので、あなたが何をするかの明確なアイデアをコードを開始することができます.さらにTDD ( Test Driven Development )をチェックします.私はこのアプローチを使用します.

テストから始める

まず、実装したい機能について考えなくてはなりません.このケースでは、なぜアプリにNavbarを追加を開始するには?プロセスは次のようになります.

Navbarコンポーネントの

のテストを作成します.

Navbarコンポーネントの

を作成します

アプリでそれを追加します.VEE

テストを書く
テストは簡単です、我々はアプリのコンテンツを消去します.Spec . jsとNavbarコンポーネントがアプリケーションに存在するかどうかをチェックするテストを追加します.Vue

import { shallowMount } from '@vue/test-utils'
import Navbar from '../../src/components/Navbar.vue'
import App from '../../src/App.vue'
import router from '../../src/router/index.js'

describe('App.vue', () => {
  it('Navbar component\'s exist', async () => {
    router.push('/')
    await router.isReady()
    const wrapper = shallowMount(App, {
      global: {
        plugins: [router]
      }
    })
    expect(wrapper.findComponent(Navbar).exists()).toBe(true)
  })
})

テストを起動
テストは失敗します、このエラーを得るように、輸入は存在しません.

コンポーネントの作成
最後のエラーは私たちに問題を教えて、私たちはコンポーネントを作成する必要があります!

touch src/components/Navbar.vue

あなたが自分でNavbarを作りたくないならば、ちょっと以下のコードを加えてください.

<template>
  <div id="nav">
    <router-link to="/">Home</router-link> |
    <router-link to="/about">About</router-link>
  </div>
</template>

<script>
export default {
  name: 'Navbar',
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

#nav {
  padding: 30px;
}

#nav a {
  font-weight: bold;
  color: #2c3e50;
}

#nav a.router-link-exact-active {
  color: #42b983;
}
</style>

アプリケーションにコンポーネントを追加します.Vue
我々は、アプリで戻ります.Vueページは、ナババーを追加します.ここでインポートパーツを追加したくない場合は、メインに追加できます.js

<template>
  <navbar />
  <router-view />
</template>

<script>
import Navbar from '@/components/Navbar.vue'

export default {
  name: 'App',
  components: {
    Navbar
  },
}
</script>

テストを起動

npm run test:unit            

動く!別のテストで他のテストが追加されます;