In this paper, starting from the Vue application strategy and practice of unit testing 01 – preface and target | Lv Liqing blog

Welcome to zhihu column — the reverse attack of the front end (where JavaScript can be, JavaScript will be.)

Welcome to my blog, Zhihu, GitHub, Nuggets.

preface

This paper mainly tries to solve three problems:

  1. Tasking Tasking Tasking Tasking Tasking Tasking Tasking Tasking Tasking Tasking Tasking Tasking Tasking Tasking Tasking Tasking Tasking Tasking Tasking Tasking Tasking Tasking Tasking Tasking Tasking Tasking Tasking Tasking Tasking Tasking Tasking Tasking Tasking Tasking
  2. What is the difference between UI components and vuex Store tests in unit testing of Vue applications? How fine should it be?
  3. How to maximize the benefits of testing, how to deploy a cost-effective testing strategy, where to test and where to leave off?

Not talked about include:

  • ATT acceptance testing or E2E end-to-end testing, this is a topic I’d like to explore further, especially in the context of TDD. # 322
  • Why TDD? But I’ll talk about why UT unit tests. Testing and TDD are two different things, and the benefits of automated testing alone are enough, but it is TDD that guides the way to better automation and continuous integration.
  • I’m a big fan of Snapshot, but it needs to be improved to work with tools like Image Snapshot and Storybook, or even CI. # 311

Here I will combine with specific scenarios to further instantiate these problems, to name a few 🌰 :

  1. Tasking Tasking Tasking Tasking Tasking Tasking Tasking Tasking Tasking Tasking Tasking Tasking Tasking Tasking Tasking Tasking Tasking Tasking Tasking Tasking Tasking Tasking Tasking Tasking Tasking Tasking Tasking Tasking Tasking Tasking Tasking Tasking Tasking Tasking
// Given a newcomer who has absolutely no UT foundation 🚶 // When he 🚶 reads and practices the Jest part of this article // Then he can learn the Given/When/Then routines he can learn the basic usage of Jest, Including syntax such as test Suite and assertion, he was able to learn several ways to test asynchrony in JestCopy the code
  1. What is the difference between UI components and vuex Store tests in unit testing of Vue applications? How fine should it be?
// Given a newbie with basic UT knowledge but no Vue tests 🚶 // When he 🚶 reads and practices the Vue unit test section of this article // Then of course, he can learn how to render Vue components in tests. He can learn how to classify UI components. In particular, he can have a deeper understanding of Vuex concepts and know how to test interactive behaviors`Redux-like`Architecture benefits: Can he reasonably test the business logic in the mutation and getter of the Vuex Store? Can he test how the component dispatches the action correctly and how the action does asynchronous operationsCopy the code
  1. How to maximize the benefits of testing in Vue projects, and how to deploy cost-effective testing strategies, i.e. where to test and where to leave off?
// Given a seeker who has the basics of UT but can't find the focus 🐒 // When he 🚶 read the Vue application test Strategy section of this article // Then he was able to find the focus of testing and rekindle his enthusiasm for UT 🔥 He was able to properly configure the test strategy of unit testing in the context of the projectCopy the code

So that’s the outline of this series of articles, to give you an overview of Vue application unit testing:

## Unit testing basics

### why Jest
Basic usage of ### Jest
How do I test asynchronous code?
### The significance of unit testing and automation

## Vue unit test

### How Vue components are rendered
### Wrapper 'find()' method with selector
### Test UI component interaction behavior

## Vuex unit test

### CQRS with 'redux-like' architecture
How do I unit test Vuex
### Interaction between Vue components and the Vuex Store

## Vue applies the test policy

### Unit testing features and locations
### Unit test concerns
### Apply the test strategy for the test
Copy the code

😯 Oh huo, the body finally begins……

Why unit tests?

Quote a friend’s distinct point of view is: writing well is a problem of ability, not writing is a problem of attitude. Unit testing can objectively make the work of developers more efficient, Vue application unit testing is a must.

Unit test context

You never talk about anything without a context. Your argument can answer the question “Why write unit tests?” rather than “we should do unit tests because of these benefits.” It should be “What problems would we have if we didn’t do unit tests?” So what is the context in which we talk about unit testing? What problems would we run into if we didn’t do unit tests?

The figure above shows the process of a product from idea analysis, design, development, testing to delivery and market feedback.

The context of unit testing is in agile. Agile is about delivering valuable, working software faster. For this reason, it has a metric to measure this “faster”, which is lead time, which measures the time an idea takes from the time it is proposed and validated to the time it is presented to the user in the final production environment. Obviously, the shorter this time, the shorter it will take for the software to get feedback and the faster the validation of value will occur.

The meaning of unit testing

How does this affect whether we write unit tests or not? The answer is, you can’t get up fast without writing unit tests. Why? Because every time you release, you have to invest in manual testing; Without testing, you tend to be afraid to refactor at will, which in turn causes code to decay and complexity to slow down your development.

So in this context, we can talk about unit testing with a good foundation, rather than a vague answer like “if it’s good, if it’s bad, don’t use it” :

  • If you say that my business doesn’t need to be online as often, and I have the manpower to cover manual testing, you can dispense with unit testing
  • If you say I don’t care about code corruption, and I don’t do refactoring, you can skip unit testing
  • If you say I don’t care about code quality, there are several that don’t have test protectionif-elseIf you’re not smart enough to be a programmer, why not use unit tests
  • If you say I do have a need for rapid deployment, but we don’t care about quality issues, we fix regression issues, you don’t need unit testing

Beyond that, you need to write unit tests. If you want to clean up and refactor code, you need to write unit tests; If you want automated test suites to help you quickly verify the integrity of your submissions, you need to write unit tests.

Unit testing in relation to automation

So what is the “lens” we use to talk about unit testing? In a word, two things: feedback speed and automation.

Automation answers the question of whether to automate unit tests. Testing is the only guarantee against refactoring, which means that without testing, you basically can’t refactor the code (refactoring is improving the internal design or implementation of the code without changing the observable behavior of the software), and you basically have to watch the code rot. So, basically, as long as your system needs to continue to evolve, you need unit tests.

Feedback speed answers the question of whether to TDD, test first or test later. The answer is, you need TDD, and it’s best to do it first, because you can speed up the feedback, shorten the feedback cycle, and at the same time reduce unnecessary waste.

This answers the question “Why do we need to write unit tests?” Let’s talk about how to write good JavaScript code and unit tests for the Vue application framework.

How to choose a testing framework?

As we all know, there’s no shortage of wheels in the JavaScript world, and the same goes for testing frameworks. In fact, the subtitle here is why Jest? Sometimes settle for the status quo, just because we have not seen the ideal appearance. It’s only when we see a better world and a better testing framework that we exclaim, “Wow, this is a wonderful world! Why didn’t I think of that?”

From tech Radar: Jest is a “zero-configuration” front-end testing tool with out-of-the-box features like emulation and code coverage for React and other JavaScript frameworks.

Our team was very pleased with the results of our front-end testing with JEST. It offers a “zero configuration” development experience with many out-of-the-box features such as Mock and code coverage. You can apply this testing framework not only to react.js applications, but also to other JavaScript frameworks. One of Jest’s much-hyped features is snapshot testing of the user interface. Snapshot testing can be a great addition to the top of the testing pyramid, but keep in mind that unit testing is still a solid foundation.

A good testing framework, Jest has several major benefits that can be covered as follows:

  • Fast world martial arts, only Fast not broken. It’s really fast, although it’s slower than the new version of Mocha. Try it again sometime in the future.
  • Opinionated provides all sorts of things without you having to choose or configure them. Mock, Test Runner, Matcher, Test Coverage
  • Watch Mode Daemon Mode. Very focused on developer experience and helped us get quick feedback on test results while coding.
  • Snapshot Testing Snapshot Testing. This is a controversial point. As mentioned above, we will open a special issue for discussion, so I will not repeat it here.

Finally, a summary of Jest

Jest as a testing framework is characterized by the fact that it is a very efficient solution that does not require interaction with other test libraries to perform its work. At the same time, Jest is very focused on the developer experience, which is particularly appreciated. There aren’t many frameworks and tools out there that focus on the developer (” human “) experience, and the Jest Watch model is all about getting quick feedback. I didn’t use it at the command line, but I can integrate it with WebStorm.

ps: In addition, there are many other developer experiences worth exploring, especially the engineering support for Jest itself from Facebook. This official video on how to develop Jest is worth watching: Building High-quality JavaScript Tools.

To be continued…

## Unit testing basics

  • ### why Jest
  • Basic usage of ### Jest
  • How do I test asynchronous code?
  • ### The significance of unit testing and automation

## Vue unit test

  • ### How Vue components are rendered
  • ### Wrapper find()Methods and selectors
  • ### Test UI component interaction behavior

## Vuex unit test

  • # # # CQRS withRedux-likearchitecture
  • How do I unit test Vuex
  • ### Interaction between Vue components and the Vuex Store

## Vue applies the test policy

  • ### Unit testing features and locations
  • ### Unit test concerns
  • ### Apply the test strategy for the test

You may also like:

  • Vue Application Unit Testing Strategy and Practice 03 – Vue component Unit Testing
  • Vue Strategies and Practices for applying unit Testing 02 – Fundamentals of Unit Testing
  • Vue applies unit testing strategy and Practice 05 – Test trophy Strategy
  • Vue Application of Unit Testing strategies and Practices 04 – Vuex Unit Testing
  • Vue application of unit Testing strategies and Practices 06 – How to land some suggestions