编写vue.js用什么软件_如何为Vue.js编写单元测试-CSDN博客

编写vue.js用什么软件

Vue.js is a JavaScript framework which is useful for building the front-end of web applications, particularly when creating complex features. For every project, it's necessary to go through everything in our applications and check that it all works as expected. However, for large projects, it quickly becomes tedious to check every feature after every new update. For this reason, we can create automated tests which can run all the time and give us reassurance that our code works. In this tutorial, we will create a few simple unit tests for VueJS which show how to get started.

Vue.js是一个JavaScript框架，可用于构建Web应用程序的前端，特别是在创建复杂功能时。对于每个项目，有必要遍历我们应用程序中的所有内容，并检查它们是否按预期工作。但是，对于大型项目，在每次新更新后检查每个功能很快变得很繁琐。因此，我们可以创建可以一直运行的自动化测试，并向我们保证代码可以正常工作。在本教程中，我们将为VueJS创建一些简单的单元测试，以展示如何入门。

To have something to test, we will be making a basic to-do list component. We'll test that the list gets displayed correctly and also that the user can add new items to the to-do list. Hopefully, by the end of this tutorial, you'll be able to write tests which check what your component outputs to the user and which simulate user actions by interacting with the HTML (for example by clicking a button).

为了进行测试，我们将制作一个基本的待办事项列表组件。我们将测试列表是否正确显示，并且用户可以将新项目添加到待办事项列表中。希望在本教程结束时，您将能够编写测试，以检查组件向用户输出的内容以及通过与HTML交互（例如，单击按钮）来模拟用户操作的过程。

Here is my Github repo with all the code in this post.

这是我的Github存储库，其中包含本文中的所有代码。

建立 ( Set up )

设置JavaScript项目可能是一个复杂的过程。有太多需要选择的库，所有库的用途都略有不同。幸运的是，对于VueJS，我们有[vue-cli]（https://github.com/vuejs/vue-cli），它为我们设置了一切！您需要先安装npm，然后才能运行以下命令：

npm install -g vue-cli
vue init webpack project-name

At this stage, you'll be prompted with a few questions. Most of them are straightforward and you can choose the default option, the only requirement is that you answer YES to including vue-router and YES to setting up unit tests with Karma and Mocha. Then install the dependencies:

在此阶段，系统将提示您一些问题。它们中的大多数都是简单明了的，您可以选择默认选项，唯一的要求是您对包括vue-router回答是，对与Karma和Mocha一起设置单元测试回答是。然后安装依赖项：

cd project-name
npm install

This final command will start up your browser and take you to localhost where your application will be running:

最后一条命令将启动浏览器，并带您到运行应用程序的本地主机：

npm run dev

Here is a (very) brief overview of some of the key dependencies that vue-cli has set up for us, including the version which was installed for my own project.

这是vue-cli为我们建立的一些关键依赖项的（非常）简要概述，包括为我自己的项目安装的版本。

依存关系 (Dependencies)

** Webpack（v2.3）**是一个捆绑器，它将各种JavaScript，CSS，HTML（和其他）文件组合在一起，使它们可以由客户端处理。
**Babel (v6.22)** is a compiler for ECMAScript 6 to ECMAScript 5. These are different JavaScript standards and currently browsers are not able to understand all of ECMAScript 6 and so it needs to be converted.
** Babel（v6.22）**是ECMAScript 6到ECMAScript 5的编译器。这些是不同JavaScript标准，当前浏览器无法理解所有ECMAScript 6，因此需要对其进行转换。

测试依赖 (Testing Dependencies)

** Karma（v1.4）**是一个测试运行程序，它生成一个Web服务器，其中包含项目的应用程序代码，并针对该服务器执行测试。
**Mocha (v3.2)** is a testing framework for JavaScript.
Mocha（v3.2）**是JavaScript的测试框架。
**Chai (v3.5)** is an assertion library which can be used with Mocha.
** Chai（v3.5）**是可以与Mocha一起使用的断言库。

In your project, you should find the following folders: build, config, node_modules, src, static and test. The only ones which are important for this tutorial are src, which will hold our application code, and test.

在您的项目中，您应该找到以下文件夹： build ， config ， node_modules ， src ， static和test 。 src对本教程来说很重要，它将保存我们的应用程序代码和test 。

我的第一个测试 ( My First Test )

从一开始就相当基本的事情开始总是好事。我们将从创建简单的列表组件开始。在src / components文件夹中创建一个名为List.vue的新文件，并将以下代码放入其中：

<template>
  <div>
    <h1>My To Do List</h1>
    </br>
    <!--displays list -->
    <ul>
      <li v-for="item in listItems">{
     {
      item }}</li>
    </ul>
  </div>
</template>

<script>
export default {
     
  name: 'list',
  data () {
     
    return {
     
      listItems: ['buy food', 'play games', 'sleep'],
    }
  }
}
</script>

In the component, the list items are stored in an array (listItems) in the component data. This data is then accessible to the template where it is looped over in a foreach loop (v-for), and displayed on the page.

在组件中，列表项存储在组件数据中的数组（ listItems ）中。然后，模板可以访问此数据，在模板中将其以foreach循环（ v-for ）进行循环，并显示在页面上。

Since it's more fun if we can see our list, we can create a new route to display our component.