A Preliminary Study on Vue Unit Testing

Preface

Unit testing refers to the inspection and verification of the smallest testable unit in the software. As for the meaning of unit in unit testing, generally speaking, its specific meaning should be determined according to the actual situation. For example, in C language, a unit refers to a function, in Java, a unit refers to a class, in graphical software, it can refer to a window or a menu. In front-end frameworks such as Vue, React, and Angular, the most important thing is unit testing for components.

Why introduce unit testing?

In today's era, various programming languages, development frameworks, and integration tools are booming, but software engineers are still struggling on the front line, overwhelmed by bugs, legacy code, technical debt, and refactoring. When your project is large enough, in the process of stacking modules and components, it is very likely to affect the previous modules. However, the affected modules have passed the test, and when we iterate, few testers will retest the system. Therefore, the affected module is likely to have an invisible bug when deployed online. That’s why we use automated testing. The most important role is to ensure the correct operation of the entire system and the robustness of the system in each iteration for large projects. The following points are summarized:

• Automated testing saves time
• Reduce low-level bugs
• Provides documentation describing component behavior
• Can improve code while writing unit tests
• Facilitates reading components and promotes refactoring
• Prove your work is done
• Good for code review
• Code performance
• Provide some metrics
  

Unit Testing Overview

Unit testing is usually done for the smallest part of an application. In Vue, components are the units to be tested (described later)

First, let's start with a simple unit test. In the code, we use the sum function to calculate the sum of two numbers.

Unit testing is a function that calls a function individually in the source code and asserts that it behaves correctly. Take a look at the following example, which is a relatively simple program that exports a sum function and then runs the function, asserting that it throws an error if it does not return.

// sum.js
export default function sum(a,b){
    return a + b
}
// sum.spec.js
import sum from './sum.js'
function testSum(){
    if(sum(1,2)!==3){
        throw new Error('sum(1,2) not return 3')
    }
}
testSum()

Because unit testing is performed on isolated units, when good unit tests are written, code problems can be accurately exposed.

In addition, in testing, we may pay attention to snapshot testing. Snapshot testing is similar to difference discovery. Snapshot testing compares the running program with screenshots. If there is a difference, an error will be displayed. In vue testing, vueTestUtil provides similar capabilities, which can compare serializable values ​​in js and compare dom output in components.

Test development patterns

If you are interested in test development, you may have heard of Test Driven Development (TDD) and Behavior Driven Development (BDD).

1. Test Driven Development (TDD)

Test-driven development, or TDD for short, is a new development method that is different from the traditional software development process. It requires writing test code before writing code for a certain function, and then only writing functional code that makes the test pass, using testing to drive the entire development process. This helps in writing concise, usable and high-quality code and speeds up the development process

First, before developers write business logic, they should write some test cases. If you run these test cases, you will get a failed result because we have not implemented the business logic to be tested at all. Implement these business logics and run the test cases to check the pass rate. If you are a good developer, these cases may be fixed by fixing the test cases or refactoring.

When we develop new functions, we still repeat the above steps. The core is to put the test cases in front. The flow chart is as follows:

For example: Let's describe TDD through a specific example. Suppose our current requirement is to implement a factorial function. We use jest to implement this test case.

var fac = require("../src/index.js");

test("Enter a negative number, should return NaN ", () => {
  expect(fac(-1)).toBe(NaN);
});

test("Input 0, should return 1 ", () => {
  expect(fac(0)).toBe(1);
});

test("Input 1, should return 1 ", () => {
  expect(fac(1)).toBe(1);
});

test("Enter 2, should return 2", () => {
  expect(fac(2)).toBe(2);
});

test("Enter 3, should return 6", () => {
  expect(fac(3)).toBe(6);
});

Running this test case will definitely fail because we have not yet implemented the fac function. Next, let's implement the factorial function.

module.exports = function fac(n) {
  if (n < 0) return NaN;
  if (n === 0) return 1;
  return n * fac(n - 1);
};

Now we run this test case again and get the following results:

As you can see, all cases have passed. This is the TDD development mode.

2. Behavior Driven Development (BDD)

In traditional software development, business personnel receive requirements and hand them over to requirements analysts, who write requirements specifications or designs. Software developers then perform architecture design and code development based on the requirements specifications. Testers then write test cases based on the requirements specifications for testing. From requirement generation to test delivery, multiple different roles are involved, and information loss and misunderstandings can easily occur during this period. As long as there is an error in any link, it will be difficult for the R&D team to deliver a qualified product.

BDD is an agile software development technique that encourages collaboration between developers, QA, and non-technical or business participants in the software, and is particularly suitable for agile projects.

Let me give you an example to describe it:

var fac = require("../src/index.js");

describe("Verify the factorial function fac:", function () {
  it("Enter a negative number, should return NaN ", () => {
    expect(fac(-1)).toBe(NaN);
  });

  it("Input 0, should return 1 ", () => {
    expect(fac(0)).toBe(1);
  });

  it("Input 1, should return 1 ", () => {
    expect(fac(1)).toBe(1);
  });

  it("Input 2, should return 2", () => {
    expect(fac(2)).toBe(2);
  });

  it("Input 3, should return 6", () => {
    expect(fac(3)).toBe(6);
  });
});

Run the test case and get the result:

Comparing the code content with the test results, we found that the difference is not that big. The main difference is the wording. The BDD test case looks like reading a document. The structure is very clear. It plays an important role in team cooperation, code reading, and promoting refactoring. When you can read the test case fluently, you can naturally write better code.

The examples here are just to describe the difference with test-driven development, and they do not represent true behavior-driven development. Behavior-driven development is more like a conceptual theory.

Summary: BDD focuses more on functionality rather than just results. To borrow a famous saying in the industry: BDD helps developers design software, and TDD helps developers test software.

Unit testing in Vue

Unit testing allows you to test independent units of code in isolation, with the goal of providing developers with confidence in their code. By writing detailed and meaningful tests, you can have confidence that your application will remain functional and stable while you build new features or refactor existing code. Unit testing a Vue application is not significantly different from unit testing any other type of application.

Framework selection

If you are a Vue developer, you should be very familiar with how to write templates in Vue components. The template syntax of template, style, and script is more direct and natural than the Jsx syntax in React. It is very appropriate to use components as the smallest test unit in Vue.

Although unit testing is usually not directly related to the framework, you need to evaluate it based on the feature set, performance and support for pre-compiled single-file components, the value generated by unit tests and the convenience of the development process.

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.

Here we consider using the Jest framework, which 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.

Jest is the most full-featured test runner. It requires minimal configuration, has JSDOM installed by default, has built-in assertions, and a very good command line user experience.

Jest Information

Jest official website

Vue CLI official plugin - Jest

Vue officially provides a very convenient testing tool library: Vue Test Utils. Next, we will explain how to use Vue Test Utils to perform unit testing on Vue components.

Vue Test Utils

It provides a rich API with powerful functions such as rendering component instances, selectors, simulating the insertion of global components, simulating states, data flows, life cycles, events, and even simulating routing. Let's try it.

Install:

The way to install Vue Test Utils is not difficult. We first select a test runner. We can choose Jest or Mocha. Here we choose Jest.

If you haven't used Vue-cli to create a project yet, you can select Jest when creating a project with vue-cli. The framework will automatically install Vue Test Utils and run:

 vue create vue-test

If you already have a project created via Vue-cli, you can run:

    vue add @vue/unit-jest

Configure Jest: jest configuration can be placed in jest.config.js or jest.config.json in the root directory

module.exports = {
  preset: "@vue/cli-plugin-unit-jest", // Single test plug-in moduleFileExtensions: ["js", "json", "vue", "less", "css"], // Suffix transform: { // Module parsing "^.+\\.js$": "<rootDir>/node_modules/babel-jest",
    ".*\\.(vue)$": "<rootDir>/node_modules/vue-jest",
  },
  moduleNameMapper: { // Alias ​​identification "^@/(.*)$": "<rootDir>/src/$1",
    "\\.(css|less)$": "<rootDir>/tests/mocks/styleMock.js",
  },
  // Snapshot parsing requires installation of jest-serializer-vue
  snapshotSerializers: ["<rootDir>/node_modules/jest-serializer-vue"],
  collectCoverage: true,
  // Coverage directory coverageDirectory: "report/coverage",
  // Single test report configuration, you need to install jest-html-reporter
  reporters:
    "default",
    [
      "./node_modules/jest-html-reporter",
      {
        logo: "https://rdc-test.mingyuanyun.com/static/img/rdc.png",
        pageTitle: "Single Test Report (Workbench)",
        outputPath: "report/unit-test/index.html",
        includeFailureMsg: true,
      },
    ],
  ],
};

Modules that need to be installed:

• jest-serializer-vue (serialization tool)
• jest-html-reporter (single test report tool, you can also choose other tools)
  

After the configuration is complete, we can run the unit test happily.

As shown below, this is a very simple component that increments the number when clicked:

// Increment.js
<template>
  <div>
    <p>number is {{ count }}</p>
    <button @click="increment">increment</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0,
    };
  },
  methods: {
    increment() {
      this.count++;
    },
  },
};
</script>

<style scoped lang="less">
p {
  font-size: 2em;
  text-align: center;
}
</style>

Vue Test Utils provides methods to implement wrappers, mount, shallowMount. After obtaining the wrapper, we can start using the many interfaces encapsulated on its instance.

// increment.spec.js
// Import test toolsetimport { mount } from "@vue/test-utils";
import Increment from "@/views/Increment";

describe("Increment", () => {
  // Mount the component and get the wrapper const wrapper = mount(Increment);
  const vm = wrapper.vm;
  it("render markup", () => {
    expect(wrapper.html()).toContain("<p>number is 0</p>");
  });

  // Simulate a user clicking it("button click should increment the count", () => {
    expect(vm.count).toBe(0);
    const button = wrapper.find("button");
    button.trigger("click");
    expect(vm.count).toBe(1);
  });

  // Click to view dom
  it("button click should increment the count and update the dom", async () => {
    expect(wrapper.text()).toContain("1");
    const button = wrapper.find("button");
    await button.trigger("click");
    expect(wrapper.text()).toContain("2");
  });
});

After writing the unit test, let's execute it:

npm run test:unit

After the run is complete, you can view the unit test report report/unit-test/index.html in the root directory of our project. Open it in the browser and you can view it.

Open coverage/lcov-report/index.html to view the coverage

OK, now we have completed a simple unit test case. We used mounts, wrappers, selectors, event triggers, etc. There are many more APIs that can be viewed in the official documentation.

document

Vue Test Utils official documentation

The above is the detailed content of the initial exploration of Vue unit testing. For more information about Vue unit testing, please pay attention to other related articles on 123WORDPRESS.COM!