Jestテストフレームワークを使用してVueコンポーネントをテストする方法

序章

Jestは人気のあるJavaScriptテストフレームワークであり、開発者向けの多くの機能が満載されています。 Jestの一般的な動作に完全に慣れていない場合は、この紹介から始めることをお勧めします。 Jestの基本を理解したら、すぐにJestを使用してVueアプリをテストする方法を確認できます。

依存関係の設定とインストール

Vue CLI がまだマシンにインストールされていない場合は、次のいずれかを実行することから始めます。

npm install -g @vue/cli

または、糸を好む場合：

yarn global add @vue/cli

これで、コマンドラインからvueコマンドを実行できるようになります。 alligator-testというVueアプリを作成しましょう。

vue create alligator-test

プロンプトでデフォルトのプリセットを選択します（Enterキーを押します）。その後、次のコマンドを実行して、テストの依存関係（@vue/cli-plugin-unit-jestおよび@vue/test-utils）を追加します。

npm install @vue/cli-plugin-unit-jest @vue/test-utils

次に、プロジェクトの package.json ファイルを変更して、scriptsに"test": "jest"というエントリを追加します。

次に、次の内容のファイルjest.config.jsを作成します。

jest.config.js

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

次に、選択したコードエディタでalligator-testディレクトリを開きます。

シンプルなアプリのコーディング

vue-cliが作成するデフォルトファイルにいくつか変更を加えましょう。

src/componentsディレクトリを削除し、App.vueを次のように変更します。

App.vue

<template>
  <div id="app">
      <div>
        <h3>Let us test your arithmetic.</h3>
        <p>What is the sum of the two numbers?</p>
        <div class="inline">
          <p>{{ x1 }} + {{ x2 }} =</p> <input v-model="guess"> <button v-on:click="check">Check Answer</button>
        </div>
        <button v-on:click="refresh">Refresh</button>
        <p>{{message}}</p>
      </div>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      x1: Math.ceil(Math.random() * 100),
      x2: Math.ceil(Math.random() * 100),
      guess: "",
      message: ""
    }
  },
  methods: {
    check() {
      if (this.x1 + this.x2 === parseInt(this.guess)) {
        this.message = "SUCCESS!"
      } else {
        this.message = "TRY AGAIN"
      }
    },
    refresh() {
      this.x1 = Math.ceil(Math.random() * 100);
      this.x2 = Math.ceil(Math.random() * 100);
    }
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
.inline * {
  display: inline-block;
}
img {
  height: 350px;
}
</style>

コードを調べて、アプリの機能を理解できるかどうかを確認してください。

次に、プロジェクトのルートディレクトリからnpm run serveを実行します。

次に、ブラウザでlocalhost:8080に移動し、動作するアプリを確認します。

いくつか推測してみてください！うまくいけば、テストを書く前にテストに合格することができます。

Jestでアプリをテストする

プロジェクトのルートディレクトリに__tests__というフォルダを作成します。これは、標準のjest規則です。

__tests__内に、app.spec.jsというファイルを作成します。デフォルトでは、jestは、*.spec.jsまたは*.test.jsという名前のプロジェクト内のすべてのテストファイル（フォルダーを再帰的に検索する）をキャッチします。

app.spec.jsの上部で、@vue/test-utilsから次のものと、Appコンポーネント自体をインポートします。

import { mount } from '@vue/test-utils'
import App from './../src/App.vue'

最初のテストを書いてみましょう。

describe('App', () => {
  // Inspect the raw component options
  it('has data', () => {
    expect(typeof App.data).toBe('function')
  })
})

ターミナルでnpm testを実行します–テストに合格するはずです！これは、コンポーネントのdataが関数であるかどうかをチェックする非常に基本的なテストです。このチュートリアルのコーディングフェーズで書き戻した方法で、実際に関数として定義しました。

別のdescribeブロックをテストファイルに追加しましょう。

describe('Mounted App', () => {
  const wrapper = mount(App);

  test('does a wrapper exist', () => {
    expect(wrapper.exists()).toBe(true)
  })
})

今回はコンポーネントをマウントしているので、wrapperが返されます。ラッパーはモックVueインスタンスです。

警告：公開以降isVueInstanceは非推奨になりました。「isaVueinstance」のテストは、「doesawrapperexists」に書き直されました。

これを使用して、Jestのexpect関数を使用して特定の値が存在するかどうかを検証できます。次のようなテストを作成できます。

it('renders the correct markup', () => {
  expect(wrapper.html()).toContain('What is the sum of the two numbers?')
})

この：

// it's also easy to check for the existence of elements
it('has a button', () => {
  expect(wrapper.find('button').exists()).toBe(true)
})

警告：パブリケーションにが含まれているため、非推奨になりました。 wrapper.contains()はwrapper.find()に置き換えられました。

これらのテストはすべて合格です。アプリのよりVue固有の機能のテストをいくつか書いてみましょう。

it('renders correctly with different data', async () => {
  wrapper.setData({ x1: 5, x2: 10 })
  await wrapper.vm.$nextTick()
  expect(wrapper.text()).toContain('10')
})

setDataを使用すると、コンポーネントのデータを設定できます。これらの変数はdataで初期化されたため、リアクティブです。ただし、コンポーネントをモックする場合は、ラッパーの基になるコンポーネントであるwrapper.vmで$nextTick()を呼び出す必要があります。次に、リアクティブプロパティが更新されていることがわかります。

最後に、アプリが意図したとおりに正しい出力を提供するかどうかをテストします。テストの追加です。

it('button click without correct sum', () => {
  expect(wrapper.vm.message).toBe("")
  const button = wrapper.find('button')
  button.trigger('click')
  expect(wrapper.vm.message).toBe('TRY AGAIN')
})

wrapper.findは、ボタン要素のラッパーを返します（ただし、ページには2つのボタンがありますが、必要なのはページの最初のボタンであるため、取得されます）。 x1とx2は、前回のテストから設定されています。ただし、v-modelを介して入力要素に接続されている変数であるguessはそうではありません。そのため、送信ボタンをクリックしても、正しい金額が入力されていません。したがって、messageはTRY AGAINであると予想されます。 npm testを実行すると、テストに合格するはずです。

it('button click with correct sum', () => {
  wrapper.setData({ guess: "15" })
  const button = wrapper.find('button')
  button.trigger('click')
  expect(wrapper.vm.message).toBe('SUCCESS!')
})

一方、合計を正しく設定すると、wrapper.vm.messageは「SUCCESS！」と表示されます。

結論

このチュートリアルが、JestでVue.jsのテストを開始する方法を理解するのに役立つことを願っています。頑張ってください。アプリをテストしてください！

この時点から、Jestで何ができるかを深く掘り下げることに興味がある場合は、スナップショットテストを読むことをお勧めします。