Close read Vue official documentation series 🎉

introduce

The purpose of testing is to ensure the reliability and stability of application functions. What can cause developers to lose confidence in their code?

  • Building new features
  • Refactor the code
  • Fix the BUG

Although there are many schools of testing, there are three main categories in the Web application space:

  1. Unit testing.
  2. Component testing.
  3. End to end (E2E) testing.

Unit testing

introduce

Unit testing allows you to test code in isolation from individual units.

Choose the framework

Unit testing is usually independent of the framework, but the main criteria for selecting a unit testing framework are as follows:

First-class error reporting

Error messages as detailed as possible, such as directly providing the context of the error, expected results versus actual results.

Whether the assertion library needs to be installed separately

Unit testing frameworks such as Jest come with assertion libraries, whereas Mocha requires a separate, additional installation.

Active community and team

You can get better support and help.

The framework

I personally choose Jest here.

  • Jest’s official website
  • Vue CLI official plug-in – Jest

Component test

introduce

Since most Vue components need to mount them into the DOM (virtual or real) to be able to fully assert that they are working properly. Therefore, the choice of component testing tool is not only required to be able to manipulate THE DOM, but also compatible with some unique products of the Vue domain, such as single-file components (SFC), Vuex, VueRouter, and other plug-ins based on the Vue ecosystem.

Choose the framework

  • Optimal compatibility with the Vue ecosystem
  • First-class error reporting

recommended

Available Vue component testing tools are:

  • Vue Testing Library
  • Vue Test Utils

The Vue Testing Library is an abstraction and wrapper based on Vue Test Utils, aiming to provide some common methods and positioning itself as a lightweight Vue component Testing Library. Vue Test Utils is Vue’s official testing tool library. It provides a series of apis for testing in the Vue environment. Using these apis together with the “unit Test runner”, you can easily Test single-file components (SFC). At the same time, it can also be compatible with some key integration areas (Vuex, Vue Router and vUE-specific plug-ins that the application depends on), so as to achieve a more complete unit test on the overall function of Vue components.

Vue Test Utils can be used with multiple unit Test runners such as Jest, Mocha and Karma.

The Vue Test Uitls + Jest combination is recommended for component testing of Vue because some well-known UI libraries such as ANTV, ElementUI, etc use this combination.

In my opinion, “component testing” is still essentially “unit testing,” which differs from traditional unit testing in that it includes some artifacts unique to the Vue environment.

End to end (E2E) testing

introduce

Compared with “unit testing” and “component testing”, “end-to-end testing” can provide broader coverage, more levels, and more comprehensive testing for applications.

The “end-to-end test” tests the entire application, which completely simulates the actual user interaction scenarios:

  • The UI interface interacts with events.
  • Different browsers and compatibility testing.
  • Full coverage of front-end functions.
  • Back-end service interfaces and infrastructure.

So “end-to-end testing” is often the key to improving confidence that your application is working properly.

Web automated testing, also known as UI automated testing, foreign called end-to-end Test (E2E, end-to-end testing), can make repetitive and tedious manual testing (point-to-point testing) through the automatic execution of the program, can greatly improve the efficiency of the Test personnel.

Choose the framework

The selection of end-to-end test tools is mainly based on the following indicators:

Cross-browser testing

The pursuit of a higher degree of cross-browser coverage testing inevitably leads to more time and machine consumption, reducing the team’s return on resources. Therefore, you must pay attention to this trade-off when choosing the number of cross-browser tests your application requires.

Faster feedback path

One of the main problems with end-to-end testing and development is that it takes a long time to run the entire suite. Typically, this is only done in the continuous integration and deployment (CI/CD) pipeline. Modern end-to-end testing tools are further optimized by adding parallelization features.

First class debugging experience

While developers have traditionally relied on scanning logs in terminal Windows to help determine what went wrong during testing, modern end-to-end testing frameworks allow developers to leverage tools they are already familiar with, such as browser development tools.

More new features

Examples include time travel, test snapshot generation, automatic video recording during running, etc.

recommended

A recent update on E2E browser-specific issues is the use of application monitoring and error reporting tools (e.g., Sentry, LogRocket, etc.) for less commonly used browsers (e.g. < IE11, older versions of Safari).

Therefore, my first end-to-end testing tool is “Cypress”.

  • Cypress’s official website
  • Vue CLI official plug-in – Cypress
  • Cypress Testing Library

Other similar end-to-end testing frameworks include:

  • Nightwatch.js: Better cross-browser testing.
  • Puppeteer:CypressThe same cross-browser features are weak, but not as good as the test interface and documentationCypress. But it is friendlier to the Headless model.
  • TestCafe: Designed to provide a simple setup so developers can focus on creating tests that are easy to write and reliable.