如何测试单个文件 Vue 组件答案

【问题标题】：How to test single file Vue components如何测试单个文件 Vue 组件
【发布时间】：2017-04-28 11:11:57
【问题描述】：

我想使用ava 对我的Vue 组件进行单元测试。现在我有一个非常简单的设置：

package.json

{
    "name": "vue-testing",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "babel": {
        "presets": [
            "es2015"
        ]
    },
    "ava": {
        "require": [
            "babel-register",
            "./test/helpers/setup-browser-env.js"
        ]
    },
    "devDependencies": {
        "ava": "^0.18.1",
        "babel-preset-es2015": "^6.24.1",
        "babel-register": "^6.22.0",
        "browser-env": "^2.0.21"
    },
    "dependencies": {
        "vue": "^2.1.10"
    }
}

./test/helpers/setup-browser-env.js

import browserEnv from 'browser-env';

browserEnv();

./test/Notification.js

import Vue from 'vue/dist/vue.js';
import test from 'ava';
import Notification from '../src/Notification';

let vm;

test.beforeEach(t => {
    let N = Vue.extend(Notification);

    vm = new N({ propsData: {
        message: 'Foobar'
    }}).$mount();
});


test('that it renders a notification', t => {
    t.is(vm.$el.textContent, 'FOOBAR');
});

src/Notification.js

export default {
    template: '<div><h1>{{ notification }}</h1></div>',
    props: ['message'],
    computed: {
        notification() {
            return this.message.toUpperCase();
        }
    }
};

当我运行 ava 时，一切正常：1 passed。

如果我可以使用以下组件语法，我会更高兴：

./src/Notification.vue

<template>
    <div>
        <h1>{{ notification }}</h1>
    </div>
</template>
<script>
export default {
     props: ['message'],

    computed: {
        notification() {
            return this.message.toUpperCase();
        }
    }
}
</script>

但随后ava 会返回以下错误：

> 1 | <template>
    | ^
  2 |     <div>
  3 |         <h1>{{ notification }}</h1>
  4 |     </div>

我不知道如何使这项工作，任何帮助将不胜感激！

【问题讨论】：

标签： javascript testing vue.js ava

【解决方案1】：

问题

您需要在运行之前将 .vue 文件编译成 JavaScript。

解决方案

您可以使用 vue-node 在模块上根据需要运行 vue-loader。

运行npm install --save-dev vue-node，将 vue-node 添加到您的项目中

在您的 /helpers 目录中，创建一个 setup.js 文件

添加以下内容：

const hook = require('vue-node');
const { join } = require('path');

// Pass an absolute path to your webpack configuration to the hook function.
hook(join(__dirname, './path/to/webpack.config.js'));

其中./path/to/webpack.config.js 是带有vue-loader 的webpack 配置的路径，相对于您的项目。

在package.json中，添加

"ava": {
  "require": [
    "./test/helpers/setup.js"
  ]
},

作为属性。

你可以在这里看到一个工作示例 repo - https://github.com/eddyerburgh/avoriaz-ava-example

替代品

This thread 展示了几种使用 ava 进行测试的方法。

【讨论】：

【解决方案2】：

你快到了：

<template>
    <div>
        <h1>{{ notification }}</h1>
    </div>
</template>
<script>
  export default {
     props: ['message'],

    computed: {
        notification() {
            return this.message.toUpperCase();
        }
    }
}
</script>

我所做的是，当开始一个新文件时，我通常使用这个模板

<template>
</template>

<script>
  export default {
  }
</script>

<style>
</style>

然后我开始写代码

这里有更多信息：https://vuejs.org/v2/guide/single-file-components.html

【讨论】：

对不起，我忘了补充 export default 已经在代码中，我已经更新了我的问题。错误依旧。

【解决方案3】：

你可以试试汽油https://github.com/MGMonge/petrol

然后做类似的事情

import Notification from "../src/Notification.vue";
import VueTestCase from "petrol/core/VueTestCase.js";

export default class NotificationTest extends VueTestCase {
    beforeEach() {
        this.SUT = this.mount(Notification, {message: 'soMe MeSSagE'});
    }

    /** @test */
    it_converts_message_to_upper_case() {
        this.assertEquals('SOME MESSAGE', this.SUT.notification);
    }
}

【讨论】：