使用 Karma 和 Mocha 进行 Vue.js 单元测试

在某些时候,任何严肃的开发项目都应该对其组件进行测试。一般来说,第一个步骤是单元测试。单元测试允许您确保各个组件的行为是可靠和一致的。

安装

没有软的方法来形容它,JavaScript Web App 测试场景是一个复杂的野兽,因此,成功的单元测试设置所需的配置相当广泛,因此,您可能最好使用 vue-cli与 webpack 模板($ vue init webpack my-project)和测试启用。

即使如此,还有一些配置更改要对 test/unit/karma.conf.js 进行。你需要指定你正在使用的插件,并可能更改发射器。

 1[label karma.conf.js]
 2var webpackConfig = require('../../build/webpack.test.conf');
 3
 4module.exports = function (config) {
 5  config.set({
 6    // To run in additional browsers:
 7    // 1. install corresponding karma launcher
 8    //    http://karma-runner.github.io/0.13/config/browsers.html
 9    // 2. add it to the `browsers` array below.
10    browsers: ['Chrome'],
11    frameworks: ['mocha', 'sinon-chai'],
12    reporters: ['spec', 'coverage'],
13    files: ['./index.js'],
14    preprocessors: {
15      './index.js': ['webpack', 'sourcemap']
16    },
17    // ** ADD THIS IN ** (vue-cli's webpack template doesn't add it by default)
18    plugins: [
19      // Launchers
20      'karma-chrome-launcher',
21
22      // Test Libraries
23      'karma-mocha',
24      'karma-sinon-chai',
25
26      // Preprocessors
27      'karma-webpack',
28      'karma-sourcemap-loader',
29
30      // Reporters
31      'karma-spec-reporter',
32      'karma-coverage'
33    ],
34    webpack: webpackConfig,
35    webpackMiddleware: {
36      noInfo: true
37    },
38    coverageReporter: {
39      dir: './coverage',
40      reporters: [
41        { type: 'lcov', subdir: '.' },
42        { type: 'text-summary' }
43      ]
44    }
45  })
46}

您的第一个组件单元测试

让我们创建一个小组件来测试。

 1[label TestMe.vue]
 2<template>
 3  <p>{{propValue}}</p>
 4</template>
 5
 6<script>
 7export default {
 8  props: ['propValue']
 9}
10</script>

现在我们将添加测试/单元/单元中的规格,这只会检查组件的文本是否设置为属性值。

 1[label specs/TestMe.spec.js]
 2import Vue from 'vue';
 3// The path is relative to the project root.
 4import TestMe from 'src/components/TestMe';
 5
 6describe('TestMe.vue', () => {
 7  it(`should render propValue as its text content`, () => {
 8    // Extend the component to get the constructor, which we can then initialize directly.
 9    const Constructor = Vue.extend(TestMe);
10
11    const comp = new Constructor({
12      propsData: {
13        // Props are passed in "propsData".
14        propValue: 'Test Text'
15      }
16    }).$mount();
17
18    expect(comp.$el.textContent)
19      .to.equal('Test Text');
20  });
21});

等待 Async 更新

因此,当我们修改任何影响 DOM 的内容时,我们需要等到 DOM 使用 Vue.nextTick() 进行更新,然后做出任何声明。

 1[label TestMe2.vue]
 2<template>
 3  <p>{{dataProp}}</p>
 4</template>
 5
 6<script>
 7export default {
 8  data() {
 9    return {
10      dataProp: 'Data Text'
11    }
12  }
13}
14</script>
 1[label specs/TestMe2.spec.js]
 2import Vue from 'vue';
 3// The path is relative to the project root.
 4import TestMe2 from 'src/components/TestMe2';
 5
 6describe('TestMe2.vue', () => {
 7  ...
 8  it(`should update when dataText is changed.`, done => {
 9    const Constructor = Vue.extend(TestMe2);
10
11    const comp = new Constructor().$mount();
12
13    comp.dataProp = 'New Text';
14
15    Vue.nextTick(() => {
16      expect(comp.$el.textContent)
17        .to.equal('New Text');
18      // Since we're doing this asynchronously, we need to call done() to tell Mocha that we've finished the test.
19      done();
20    });
21  });
22});

参考

希望这有助于你开始!

然而,Vue 中组件的实例化和扩展方式可能有点困惑,所以您可能想看看 官方Vue 测试以获得有关如何测试各种组件功能的更好的想法。

Published At
Categories with 技术
Tagged with
comments powered by Disqus