KarmaとMochaを使用したVue.jsユニットテスト

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

ある時点で、本格的な開発プロジェクトでは、コンポーネントのテストを実装する必要があります。通常、最初のステップはユニットテストです。単体テストにより、個々のコンポーネントの動作が信頼でき、一貫していることを確認できます。 KarmaとMochaをWebpackと組み合わせて使用することで、Vueコンポーネントを比較的簡単に単体テストできます。

インストール

それを簡単に表現する方法はありません。JavaScriptWebアプリのテストシーンは複雑な獣です。その結果、単体テストのセットアップを成功させるために必要な構成はかなり広範囲に及びます。したがって、 vue-cli をwebpackテンプレート（ $ vue init webpack my-project ）で使用し、テストを有効にすることをお勧めします。

それでも、 test / unit /karma.conf.jsに対して行う構成の変更がいくつかあります。使用しているプラグインを指定する必要があり、場合によってはランチャーを変更する必要があります。この場合、karma-phantomjs-launcherの代わりにkarma-chrome-launcherを使用しています。

karma.conf.js

var webpackConfig = require('../../build/webpack.test.conf');

module.exports = function (config) {
  config.set({
    // To run in additional browsers:
    // 1. install corresponding karma launcher
    //    http://karma-runner.github.io/0.13/config/browsers.html
    // 2. add it to the `browsers` array below.
    browsers: ['Chrome'],
    frameworks: ['mocha', 'sinon-chai'],
    reporters: ['spec', 'coverage'],
    files: ['./index.js'],
    preprocessors: {
      './index.js': ['webpack', 'sourcemap']
    },
    // ** ADD THIS IN ** (vue-cli's webpack template doesn't add it by default)
    plugins: [
      // Launchers
      'karma-chrome-launcher',

      // Test Libraries
      'karma-mocha',
      'karma-sinon-chai',

      // Preprocessors
      'karma-webpack',
      'karma-sourcemap-loader',

      // Reporters
      'karma-spec-reporter',
      'karma-coverage'
    ],
    webpack: webpackConfig,
    webpackMiddleware: {
      noInfo: true
    },
    coverageReporter: {
      dir: './coverage',
      reporters: [
        { type: 'lcov', subdir: '.' },
        { type: 'text-summary' }
      ]
    }
  })
}

最初のコンポーネントユニットテスト

テストする小さなコンポーネントを作成しましょう。

TestMe.vue

<template>
  <p>{{propValue}}</p>
</template>

<script>
export default {
  props: ['propValue']
}
</script>

次に、 test / unit /specsに仕様を追加します。これは、コンポーネントのテキストがプロパティ値に設定されていることを確認するだけです。

specs / TestMe.spec.js

import Vue from 'vue';
// The path is relative to the project root.
import TestMe from 'src/components/TestMe';

describe('TestMe.vue', () => {
  it(`should render propValue as its text content`, () => {
    // Extend the component to get the constructor, which we can then initialize directly.
    const Constructor = Vue.extend(TestMe);

    const comp = new Constructor({
      propsData: {
        // Props are passed in "propsData".
        propValue: 'Test Text'
      }
    }).$mount();

    expect(comp.$el.textContent)
      .to.equal('Test Text');
  });
});

非同期更新を待っています

Vueは、DOMを非同期的にティック単位で更新します。したがって、DOMに影響を与えるものを変更する場合は、 Vue.nextTick（）を使用してDOMが更新されるのを待ってから、アサーションを作成する必要があります。

TestMe2.vue

<template>
  <p>{{dataProp}}</p>
</template>

<script>
export default {
  data() {
    return {
      dataProp: 'Data Text'
    }
  }
}
</script>

specs / TestMe2.spec.js

import Vue from 'vue';
// The path is relative to the project root.
import TestMe2 from 'src/components/TestMe2';

describe('TestMe2.vue', () => {
  ...
  it(`should update when dataText is changed.`, done => {
    const Constructor = Vue.extend(TestMe2);

    const comp = new Constructor().$mount();

    comp.dataProp = 'New Text';

    Vue.nextTick(() => {
      expect(comp.$el.textContent)
        .to.equal('New Text');
      // Since we're doing this asynchronously, we need to call done() to tell Mocha that we've finished the test.
      done();
    });
  });
});

参照

うまくいけば、それはあなたが始めるのに役立つでしょう！

ただし、Vueでコンポーネントをインスタンス化および拡張する方法は少し混乱する可能性があるため、公式Vueテストを参照して、さまざまなコンポーネント機能をテストする方法についてより良いアイデアを得ることができます。

getdocs

13036