preface

As a big front-end developer, after passing the initial development level, is there often a confusion: My code does meet the development requirements, but it always feels that there is a more “elegant” solution, always feels that there is some redundancy, always feels that the maintainability is not so strong, always feels that there are some bugs but I can not detect them in the practical operation of functional testing; So the question is, are there methodologies that have been developed to make our own testing more comprehensive and granular, so that our code can be visually improved both in terms of readability and maintainable? B: of course! Before I did not understand, also confused, after a period of learning, summed up the following points, please let me tell you:

1. Start with unit tests

1.1 Unit Test Meaning:

First, what is testing? Testing is a way to verify that code is executing as expected. Unit testing is a test that minimizes granularity, that is, testing and validation of the smallest testable unit in software.

1.2 Significance of unit Testing

1. Identify potential bugs in the code; 2. 3. Convenient for collaborative development; 4. Ensure the security of code refactoring;

1.3 Unit Test Principles and Examples:

let addFn = (a,b) = > a + b  // The most basic pure function can be regarded as the smallest unit, that is, the object under test
// Test principle: when executing a function, compare the result of the function execution with the expected value, and throw an error if the result is different.

// Test code (define an expected function, whose return value is a function that compares the execution result of the test function with the expected value. When the expected function is executed, call the toBe method in the return value, then verify whether the unit test result is the same as the expected value, so as to get the conclusion whether the test passes)
let expext = (testRes) = >{
    return {
        toBe: (wantRes) = >{
            if(testRes ! == wantRes){throw new Error('Expected value and actual value are not equal oh ~')}}}}let test  =  (descTestText,fn) = >{
    try {
        fn()
    }catch(e) {
        throw new Error(`${descTestText}There is a problem,${e}`)
    }
}

test(Summation test, (() = >{
 expext(addFn(1.5)).toBe(5)}))// If the input value is different from the expected value of the test, an error is reported:
VM1171:18 Uncaught Error: There is a problem with the summation test,Error: Expected value is not equal to actual value ~ at test (<anonymous>:18:15)
    at <anonymous>:22:1
Copy the code

1.4 How is unit testing generally used in projects

Mature testing frameworks are generally used in projects to conduct unit tests on front-end code. Here, take “Jest framework” in javaScipt for example:

1.4.1 Basic introduction to Jest

Jest is an open source JavaScript testing framework for Facebook that automatically integrates assertions, JSDom, coverage reporting, and all the testing tools developers need. It is a nearly zero-configuration testing framework.

1.4.2 Jest Installation

Jest can be installed using NPM or YARN

NPM install -d jest or YARN add -d jest is installedCopy the code

After the installation is complete, you can use NPM ls jest to view the installation version

1.4.3 Jest test principle

The principle is similar to that described in 1.3, refer back to 1.3 for details

1.4.4 Jest practical

Initialize the project

npm init -y
Copy the code

After the project is initialized, create a file that needs to be tested and expose the methods that need to be tested:

let add = (a,b) => a+b;
module.exports = { add };
Copy the code

Then create a test file to test the method under test:

Const {add}= require('./add.js'); Test (' sum test ',()=>{expect(add(1,2)).tobe (3)})Copy the code

Next we just need to modify the execution script in package.json:

 "scripts": {
    "test": "jest"
  },
Copy the code

Finally, execute the script command

npm run test
Copy the code

If successful, the terminal will see the following:

PASS./add.test.js √ Test Suites (2 ms) Test Suites: 1 passed, 1 total Tests: 1 passed, 1 total Snapshots: 0 Total Time: 1.772 S Ran All Test Suites.Copy the code

Ok, so that’s the first of our learning notes on writing high-quality code, and next we’ll cover the first big thing in this column, the first step towards truly reinventing code!

Click Write High Quality code (2) to see, for elegance, be there or be square ~~