Front end test

concept

  • Unit Testing, or UT for short, refers to the inspection and verification of the smallest testable Unit in the software, which is the lowest level of Testing activity. In front-end development, a Unit can be a function, a class, or a component. Assertion checking on their output is a white-box test, typically written by developers who can determine if their logic is correct by writing an execution UT.
  • Integration Testing, Integration Testing, is actually Testing the Integration of multiple units according to the needs of business functions. According to the React website, the distinction between “unit testing” and “integration testing” can be fuzzy. If you’re testing a form, should the use case also test the buttons in the form? Does a button component need its own test suite? Should the refactoring button component affect the test case of the form? Different teams or products may come up with different answers.
  • End-to-end Testing (E2E), also known as Functional Testing, browser Testing, or smoke Testing, refers to the Testing of a real system from the user’s perspective. E2e Testing is essentially a black box test, which is equivalent to simulating user access to an application. Mainly check whether the interface or function is correct. When automated testing is not perfect, it is usually done manually.
  • User Interface Testing, or UI Testing for short, has a lot of overlap with E2E Testing, and it is usually possible to cover UI Testing while doing E2E.
  • Test Drive Development (TDD) is test-driven Development. To put it simply, first write test cases according to the requirements, then code implementation, then test, cycle this process until the realization of the product. It can be seen that the basic idea of TDD is to promote the whole development through testing, but test-driven development is not just a simple test work, but a process of quantifying requirements analysis, design and quality control.
  • Behavior Drive Development (BDD) is Behavior driven Development. BDD can be regarded as a supplement to TDD, or a branch of TDD. In TDD, there is no guarantee that the tests you write according to your design will do what your users expect. BDD makes this part simple and natural, describing it in natural language so that development, testing, BA, and customers can all agree on this basis. BDD relies more heavily on requirements behavior and documentation to drive development, which is similar in description to test code. E2e testing is more often combined with BDD development patterns.

To sum up, the following articles mainly illustrate and compare the use of common tools for unit testing and end-to-end testing.

Front-end testing tool

There are many front-end testing tools, which can be divided into several categories:

  • Assertions library
  • Test coverage tool
  • The test framework

Assertions library

When testing, we need to use assertions to determine whether the code is doing what it’s doing. Without assertions, our tests are meaningless.

assert

Assert is a built-in assertion library for Node.js. Here’s a simple example:

const assert = require('assert');
assert(1= = =2);

const test = 'hello world';
assert.strictEqual('hello world', test);
Copy the code

chai

The assertion library is full and powerful, providing the common Assert, should, and Expect assertion keywords.

power-assert

If you are using assert, there is no need to introduce power-assert with require(‘power-assert’), which has the same API as Assert and powerful prompts, as shown in the figure below.

The installation

npm i power-assert
Copy the code

Test coverage tool

Istanbul

The app is named after Istanbul, Turkey’s largest city, because Turkish carpets are known around the world, and carpets are made to cover.

The installation

npm install -g istanbul
Copy the code

run

istanbul cover path
Copy the code

The test framework

The purpose of the testing framework is to provide some convenient syntax for describing test cases, such as pre-processing and post-processing of a group of use cases (beforeAll, beforeEach, afterAll, afterEach, etc.). Use the describe function to represent a set of use cases. Here are some common testing frameworks and a brief analysis.

Jest

Jest is a testing framework from Facebook. It is a large and comprehensive testing framework with built-in assertions, test coverage tools, Mock tools, and out-of-the-box support for browsers and NodeJS. React supports BDD (also known as expect syntax) and is the official recommended testing framework for React. Jest can be used for both unit testing and end-to-end testing. Jsdom can be used for end-to-end testing, and local mock data is used for network requests to ensure unit testing is done at the millisecond level. If you need to use the real DOM, you need to use other testing tools.

Mocha

Macha is also a rich JS testing framework that supports browsers and NodeJS, but does not have built-in assertion libraries, test coverage tools, and Mock tools. It needs to work with other tripartite libraries. For example, TDD writing (that is, assert.equal syntax) is supported in conjunction with CHAI, and BDD writing is also supported. Mocha can be used for both unit testing and end-to-end testing in conjunction with other testing tools.

Jasmine

Jasmine is a BDD testing framework that supports browsers and NodeJS, built-in assertion libraries, mock tools, etc. It is often used in conjunction with Karam, but with the rise of larger and more comprehensive frameworks like Jest, Jasmine has become more and more old-school, and is now becoming less popular and less used every year.

E2e Test tool

Cypress

Cypress is an E2E testing framework, testing interface and documentation to do the ultimate in a product.

PhantomJS

PhantomJS, a webKit-based headless browser, has no UI. Using JS code to simulate some operations on the Web interface is not convenient and is not recommended.

NightmareJS

NightmareJS, a lightweight browser automation testing library. Based on Electron, similar to PhantomJS, but about twice as fast and more modern. Nightmare also has the advantage of providing daydream, a Chrome plugin that can automatically generate test code by recording the screen, although it was last updated in 2019 and is not recommended.

Playwright

The offender provides reliable end-to-end testing for modern Web applications. Supports apis of NodeJS, Python, Java and.net. It also supports Google Chrome and Microsoft Edge (with Chromium), Apple Safari (with WebKit) and Mozilla Firefox. The offender supports both headless (sans browser UI) and headed (with browser UI) modes in all browsers and on all platforms. Headed is great for debugging, while Headless is faster for CI/ cloud execution.

Storybook

Storybook is an open source tool for independently building UI components and pages. It simplifies UI development, testing, and documentation.

Selenium

Selenium is the granddaddy of E2E testing frameworks and is available in multiple programming languages. It is implemented based on webDriver rather than the WebKit kernel, so Selenium browser compatibility is much better than other browsers.

Nightwatch

Nightwatch Originally Selenium, is an automated testing framework for Web sites or applications using Node.js and W3C WebDriver APIS. It is also a complete and integrated solution for end-to-end testing of web applications and websites using A BDD approach. It can also be used for Node.js unit and integration testing.

Nightwatch is compatible with Firefox, Chrome, Safari and Edge.

Protractor

Protractor is an E2E testing framework for Angular.

Test the framework running environment

Karam

Karam is a simple tool for executing JS code in multiple browsers. It is not a complete testing framework, there is no assertion library, it just starts an HTTP server, generates test HTML files, and executes the JS of the test case. Strictly speaking, Karam is not really a testing framework, but an environment in which to run it.

Puppeteer

Puppeteer is a node library that provides a set of apis for manipulating Chrome, which is basically a Headless Chrome browser (you can also configure it with a UI, which is not available by default). Since it is a browser, Puppeteer can do all the things we can do manually on a browser, and as the name suggests, Puppeteer is easy to manipulate.

Together with headless-Recorder, a Chrome plugin, the operation can be recorded in both Puppeteer and offender versions.

Other test tools

AVA

AVA is a Node.js testing tool with a concise API, detailed error output, support for new syntax, and process isolation.