Why are there tests on the front end?

At present, the front end is not just an interface display function, but also related page interaction.

  • Often, as a front-end developer, the biggest test is to debug with a breakpoint or simulate basic user operations, as long as this function can be implemented, with little or no concern for the overall logic or layout. On this basis, if our feature points are refactored or more feature points are added to them, development events can become longer or the entire page can be rewritten.
  • The second point is that when we resign or the project is handed over to another team, the other team does not know the intention and function of this module, only to read the code sentence by sentence, and do not know whether the change of logic will have any impact on the existing program, so we have to re-interrupt the point for debugging.

These two points are more or less encountered by front-end developers in their work, so if the front end writes its own tests, it will greatly reduce the frequency of these two problems. My understanding of front-end writing testing is actually writing test code to verify that the functionality and function-related code you are developing conforms to the intended logic and design.

The status of front-end testing?

I do not know if we found that programmers have a common problem, is “too confident in their own code”, most developers will not think of their own code on a layer of double insurance, resulting in a lot of low-level problems. There are also some people who have the idea of testing, but don’t know how to do it, don’t know how to write the test. Then there are a few people who really don’t have time to write, because the project is so tight, they don’t have time to do it. To summarize, the current state of front-end testing looks like this:

  1. Not paying attention to front-end testing and thinking it’s not important
  2. Project sense of progress, no time to write
  3. Don’t know how to write it
  4. There is no consciousness at all

Benefits of front-end testing

2. Write higher quality code. 3. Refactor or rewrite code with higher reliabilityCopy the code

Classification of front-end testing?

UI test

Test the functionality of the user interface module layout is reasonable, the overall style is consistent and the placement of each control position is in line with the customers to use habits, more important is to meet the operation is convenient, navigation easy to understand, interface in the word is correct, whether naming unification, page is beautiful, text, images, the combination is perfect or not.

Integration testing

Integration testing, also called assembly testing or joint testing. On the basis of unit test, all modules are assembled into subsystems or systems according to the design requirements (such as according to the structure diagram) for integration test.

Unit testing

The smallest testable unit in the software is checked and verified.

What’s the difference

1. Unit test: ensure the logic of the code is correct. 2. Integration test: ensure the integration of each end to ensure that the data is correctCopy the code

What the three have in common:

Both are designed to reduce bugs and improve code quality and user experience

Common Test Tools

jest

Is an out-of-the-box, zero-configuration, enjoyable JavaScript testing framework that focuses on simplicity.

Usage:

1Test ('two plus two is four'.() = > {
  expect(2 + 2).toBe(4);  // Check whether 2+2 is 4
});
2ToEqual = toEqual = toEqual'object assignment'.() = > {
  const data = {one: 1};
  data['two'] = 2;
  expect(data).toEqual({one: 1.two: 2});
});
3Make a clear distinctionnull,undefinedOr it's not obviousnull,undefined 
> toBeNull matches only null
> toBeUndefined matches only undefined
> toBeDefined is the opposite of toBeUndefined
> toBeTruthy matches anything that an if statement treats as true
> toBeFalsy matches anything that an if statement treats as false
test('null'.() = > {
  const n = null; expect(n).toBeNull(); expect(n).toBeDefined(); expect(n).not.toBeUndefined(); expect(n).not.toBeTruthy(); expect(n).toBeFalsy(); })...Copy the code

Jest is a very useful test tool. If you build your React project using the React scaffolding, you can use Jest as a test tool. If you use Jest as a test tool, you can use Jest as a test tool. NPM install –save-dev –save-exact [email protected]

Mocha

Mocha is a feature-rich javascript testing framework that runs in Node.js and browsers to make asynchronous testing easy and fun. Mocha tests run continuously, allowing flexible and accurate reporting while mapping uncaught exceptions to correct test cases.

usage

  1, determine whether it is equalvar assert = require('assert');
    describe('Array'.function() {
      describe('#indexOf()'.function() {
        it('should return -1 when the value is not present'.function() {
          assert.equal([1.2.3].indexOf(4), -1); }); }); }); .Copy the code

A significant framework in the current front-end testing market, Mocha can be integrated with simulators, third-party assertions, and probing tools like CHAI and enzyme. In addition to having a large social network, Mocha offers a full range of feature options and documentation.

QUnit

The powerful, easy-to-use JavaScript testing framework.

usage

1, determine whether it is equalfunction add(a, b) {
    return a + b;
  }

  QUnit.module('add'.function() {
    QUnit.test('should add two numbers'.function(assert) {
      assert.equal(add(1.1), 2); }); }); .Copy the code

QUnit is a testing framework for javascript applications. It was originally developed for JS and jQuery. QUnit can provide project environment support, such as IOS, Android, or H5 environment, and can test code for exceptions. QUnit main operation method point here!!

Why is React good for unit testing?

1. One-way data flow 2. Function component 3Copy the code

Nine efficient front-end testing tools