Many colleagues who are new to front-end development ask me how to do front-end testing…

To figure out how to do a good test, the first question you have to ask yourself is, okay? What exactly is testing for? Is not to make no mistake! So testing is really about finding the right way to do as little as possible but as reliable as possible.

There are many concepts of testing, such as black box testing, white box testing, unit testing, integration testing, E2E testing, automatic testing, manual testing and so on

Leaving these concepts behind, I think the practical approach can be divided into the following

1. ESLint test

Writing projects in TypeScript and using ESLint for type and format validation can avoid errors to a large extent.

2. Tool tests

There will be many utility class pure functions in the project, here we need to use the method of unit testing to test the utility class. This is done using Jest.

3. Component testing

Now popular single-page applications have many reusable components. If each component is used properly, some Testing frameworks, such as Testing Library and Enzyme, need to be used to test. The main principle of these Testing frameworks is to generate a test virtual DOM environment in the test sandbox environment. Then call React, Vue and other components to render HTML nodes, or receive click events, and judge whether the rendering result is correct.

  • The Testing Library prefers the user’s end result, such as “I see”, “I click”, “What result do I get”
  • Enzyme prefers internal program structure, such as “program calls”, “program simulates clicking”, “what result does the program produce”, “what happens inside the component”

4. Page test

Page test can be said to test the final operation logic of the product. The test tool here can choose Cypress from E2E. This test tool enables the website to run in a browser and can simulate users’ clicks to judge page elements, which is very reliable.

Mock data tests

In addition to the above points, we also need to mock data to show the various circumstances of the request for error correction.

conclusion

Front end test is not to say that all of the above process need to be, after all, writing tests will take time, and some business system is often because of business needs, project manager, the boss of factors such as the frequent change of just written test may be a waste, the point is is suitable for you to find a suitable combination of the current project, Make the most reliable test with the least effort, quickly locate and find problems.