Recommended plugins and usage examples for vue unit testing

Unit tests should:

• Can run quickly
• Easy to understand
• Only test a single unit of work
  

frame

Because unit testing recommendations are generally framework-agnostic, the following are just some basic guidelines to look at when evaluating unit testing tools for your application.

First-class error reporting

Providing useful error messages when tests fail is crucial to a unit testing framework. This is the job of an assertion library. An assertion with high-quality error messages can minimize the time required to debug the problem. In addition to simply telling you what test failed, an assertion library should also provide additional context and why the test failed, such as the expected result vs. the actual result obtained.

Some unit testing frameworks such as Jest include assertion libraries. Others, such as Mocha, require you to install a separate assertion library (usually Chai).

Active community and team

Because the major unit testing frameworks are open source, having an active community is crucial for teams aiming to maintain their tests over the long term and ensure that the project itself remains active. The added bonus is that an active community provides you with added support any time you run into problems. While there are many tools in the ecosystem, here we list some of the commonly used unit testing tools in the Vue ecosystem.

Jest

Jest is a JavaScript testing framework focused on simplicity. A unique feature is the ability to generate snapshots for testing, providing another way to verify application units.

Mocha

Is a JavaScript testing framework focused on flexibility. Because of its flexibility, it allows you to choose different libraries to satisfy other common functions such as listening (such as Sinon) and assertions (such as Chai). Another unique feature of Mocha is that it can run tests not only in Node.js, but also in the browser.

Recommended plugins

Vue Testing Library (@testing-library/vue)

Vue Testing Library is a set of tools that focus on testing components without relying on implementation details. Designed with accessibility in mind, its approach also makes refactoring a breeze.

The guiding principle is that the more tests resemble how the software is used, the more confidence they provide.

Vue Test Utils

Vue Test Utils is the official low-level component testing library, which is written to provide users with access to Vue-specific APIs. If you are new to testing Vue applications, we recommend using the Vue Testing Library, which is an abstraction over Vue Test Utils. This library has very detailed API documentation Vue Test Utils

Example

<template>
  <div>
    <input v-model="username">
    <div
      v-if="error"
      class="error"
    >
      {{ error }}
    </div>
  </div>
</template>

<script>
export default {
  name: 'Hello',
  data () {
    return {
      username: ''
    }
  },

  computed: {
    error () {
      return this.username.trim().length < 7
        ? 'Please enter a longer username'
        : ''
    }
  }
}
</script>

The above is the details of the recommended plug-ins and usage examples for vue unit testing. For more information about vue unit testing, please pay attention to other related articles on 123WORDPRESS.COM!