ホームページ > 記事 > ウェブフロントエンド > vue-cliの単体テストの分析例

vue-cliの単体テストの分析例

不言オリジナル: 2018-07-20 10:50:341743ブラウズ

この記事では、vue-cli の単体テストの分析例を紹介します。必要な方は参考にしてください。

vue-cliの単体テスト

最近のプロジェクト開発も終わりに近づいてきたので、前作の欠点を反省し、テスト手法を導入すべきだと思い、フロントエンドテストなどのドキュメントの勉強を始めました。このプロジェクトは vue-cli に基づいた単一ページであるため、これをベースに拡張していきたいと思います。

テストフレームワークの種類

Vueはjest、mochaなどのいくつかのテストフレームワークを公式に提供しています。今回はkarma + mocha + chaiパッケージを使用して実装します。また、公式のテストライブラリ vue-test-utils とも組み合わせられます。 特記事項、vue-cli のインストール時にテストタイプを選択するときは、上下キーを使用して、対応するテストフレームワークを選択してください

具体的なケースの説明

静的ファイル読み込みテスト

import Vue from 'vue'
import Test from '@/components/Test'
import {mount} from 'vue-test-utils'

describe('Test.vue',()=>{
    it('页面加载成功',()=>{
        const wrapper = mount(Test);
        expect(wrapper.find('h1').text()).to.equal('My First UnitTest');
    })
})

テスト対象のファイルを紹介しますホームページ上の vue と vue - test-utils が提供するメソッド mount を使用してページをマウントし、ページの Dom 要素を簡単に取得できます。これは mocha の構文であり、それぞれ 2 つのパラメーターを受け入れます。前者はテスト対象のページ、後者はテスト時のプロンプトで、どちらも関数を受け入れます。その関数は、必要な結果、つまり、expect() の内容が結果と等しいかどうかをアサートします。欲しいです。

イベント動作テスト

import Vue from "vue"
import Event from '@/components/Event'
import { mount } from 'vue-test-utils'

describe('Event.vue',()=>{
    it('事件方法测试',()=>{
        const wrapper = mount(Event);
        const clickButton = wrapper.find('button');
        clickButton.trigger('click');
        const number = Number(wrapper.find('input').element.value);
        expect(number).to.equal(2);
    })
})

全体的な形式は似ており、主にvue-test-utilsのトリガーメソッドを使用してクリック動作をシミュレートします

非同期動作テスト

import Vue from 'vue'
import {mount,shallow} from 'vue-test-utils'
import AsyncEvent from '@/components/AsyncEvent'

describe('AsyncEvent.vue',()=>{
    it('异步行为测试',(done)=>{
        const wrapper = mount(AsyncEvent);
        wrapper.find('button').trigger('click');
        setTimeout(()=> {
            expect( Number(wrapper.find('span').text()) ).to.equal(2);
            done();
        }, 1000)
    })
})

ここでは非同期テストのためにSetTimeoutが使用されていることに注意してください。 done このメソッドは、テストの実行がいつ終了するかを決定するために使用されます

VUEX テスト

import { shallow, createLocalVue } from 'vue-test-utils'
import Vuex from 'vuex'
import VuexTest from '@/components/VuexTest'
import myModule from '@/store/index'

const localVue = createLocalVue();
localVue.use(Vuex);

describe('VuexTest.vue',()=>{
    let getters = myModule.getters;
    let state;
    let store;
    let mutations;

    beforeEach(()=>{
        state = {
            count: 0
        }
        mutations = {
            increment(state) {
                state.count++;
            }
        }
        store = new Vuex.Store({
              modules: {
                state,
                mutations,
                getters,                
              }
        })
    })

    it('Vuex 渲染监测',()=>{
        const wrapper = shallow(VuexTest,{store,localVue});
        const span = wrapper.find('span');
        expect( Number(span.text()) ).to.equal(state.count)
    })

    it('Vuex 事件监测',()=>{
           mutations.increment(state)
          expect(state.count).to.equal(1);
    })
})

もちろん、vue を使用する場合は、createLocalVue メソッドを使用して、vuex テストも考慮する必要があります。 vue 環境は、グローバルな状況への影響を避けるためにローカルかつ独立して動作します。shallow は、マウントおよびレンダリングされた Vue コンポーネントを含む Wrapper を作成します。ただし、これは基本的に mount と同じです。 , 公式デモではshallowmountを使用していますが、実際のテストではエラーが報告されます。その後shallowに変更します。次に、vuex ストアウェアハウスをテストで構築する必要があります。プロジェクト内のストアも導入され、そのゲッターがテスト内のゲッターに割り当てられます。これにより、アサーションの結果がプロジェクトに設定されることが保証されます。

結論

結局のところ、私は単体テストを書くのが初めてであり、それについて詳しくはあまり知りません。特に興味がある学生は、上記のテストフレームワークとドキュメントをよく見てください。これらのライブラリの API は豊富です。

vue-cliの単体テストの分析例

vue-cliの単体テスト

テストフレームワークの種類

具体的なケースの説明

結論

関連記事