在某些时候,任何严肃的开发项目都应该对其组件进行测试。一般来说,第一个步骤是单元测试。单元测试允许您确保各个组件的行为是可靠和一致的。
安装
没有软的方法来形容它,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 测试以获得有关如何测试各种组件功能的更好的想法。