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

投稿日: 2022-04-20 2022-10-06
タグ: Vue.js

序章

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

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

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

npm install -g @vue/cli

または、糸を好む場合：

yarn global add @vue/cli

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

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 私たちのコンポーネントは関数です。このチュートリアルのコーディングフェーズで書き戻した方法で、実際に関数として定義しました。

もう1つ追加しましょう 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、それらは反応性です。ただし、コンポーネントをモックするときは、 $nextTick() の上 wrapper.vm、ラッパーの基礎となるコンポーネントです。次に、リアクティブプロパティが更新されていることがわかります。

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

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 以前のテストから設定されています。しかし guess、を介して入力要素に接続されている変数 v-model、ではありません。そのため、送信ボタンをクリックしても、正しい金額が入力されていません。したがって、 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で何ができるかを深く掘り下げることに興味がある場合は、スナップショットテストを読むことをお勧めします。

getdocs

13036