Jestテストフレームワークを使用してVueコンポーネントをテストする方法
序章
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
次の内容で:
module.exports = {
preset: '@vue/cli-plugin-unit-jest'
}
今、開きます alligator-test
選択したコードエディタのディレクトリ。
シンプルなアプリのコーディング
デフォルトのファイルにいくつかの変更を加えましょう。 vue-cli
私たちのために作成します。
を削除します src/components
ディレクトリと変更 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で何ができるかを深く掘り下げることに興味がある場合は、スナップショットテストを読むことをお勧めします。