原文 : An Overview of JavaScript Testing in 2021, this article is An Overview of JavaScript Testing in 2021

Test type

  • Unit testing
  • Integration testing (component testing)
  • Functional testing (E2E, end-to-end testing)

The test environment

  • The browser
  • No interface browser
  • Nodejs

Test tool type

Frame comparison table

The framework                 function Test lanuchers Testing structure providers Assertion functions Generate and display test progress and summary Mocks, spies, and stubs Generate and compare snapshots Generate code coverage Browser Controllers Visual Regression Tools
Karma ✔ ️ 　 　 ✔ ️ 　 　 　 　 　
Jasmine ✔ ️ ✔ ️ ✔ ️ ✔ ️ ✔ ️ 　 　 　 　
Jest ✔ ️ ✔ ️ ✔ ️ ✔ ️ ✔ ️ ✔ ️ ✔ ️ 　 　
TestCafe ✔ ️ ✔ ️ ✔ ️ ✔ ️ 　 　 　 ✔ ️ 　
Cypress ✔ ️ ✔ ️ ✔ ️ ✔ ️ 　 　 　 ✔ ️ 　
webdriverio ✔ ️ 　 　 　 　 　 　 　 　
Mocha 　 ✔ ️ 　 ✔ ️ 　 　 　 　 　
Cucumber 　 ✔ ️ 　 　 　 　 　 　 　
Chai 　 　 ✔ ️ 　 　 　 　 　 　
Unexpected 　 　 ✔ ️ 　 　 　 　 　 　
Sinon 　 　 　 　 ✔ ️ 　 　 　 　
enzyme 　 　 　 　 ✔ ️ 　 　 　 　
testdouble 　 　 　 　 ✔ ️ 　 　 　 　
Ava 　 　 　 　 　 ✔ ️ 　 　 　
Instanbul 　 　 　 　 　 　 ✔ ️ 　 　
Blanket 　 　 　 　 　 　 ✔ ️ 　 　
Nightwatch 　 　 　 　 　 　 　 ✔ ️ 　
Nightmare 　 　 　 　 　 　 　 ✔ ️ 　
Phantom 　 　 　 　 　 　 　 ✔ ️ 　
Pupperteer 　 　 　 　 　 　 　 ✔ ️ 　
Applitools 　 　 　 　 　 　 　 　 ✔ ️
Percy 　 　 　 　 　 　 　 　 ✔ ️
Wraith 　 　 　 　 　 　 　 　 ✔ ️
WebdriverCSS 　 　 　 　 　 　 　 　 ✔ ️

Browser Controllers

Simulate user behavior, such as mouse clicking, dragging, scrolling, code words, and navigation

  • Install drivers such as Selenium, ProTractor, webdriverIO, Nightwatch, Apium

    Your code on Node.js <> WebDriver <> FF/Chrome/Safari Driver <> Browser

  • Inject scripts such as testCafe, Cypress

    document.getElementByID('someButton').dispatchEvent(clickEvent)

  • Expose the browser’s native API, such as Puppeteer

    Your code on Node.js <> Browser's API

Use test frameworks in combination

Like Jest, Jasmine, TestCafe, Cypress is integrated and ready out of the box. Some require combinations such as the common combination of mocha + chai + sinon

It is suggested to consider two aspects: 1. Unit testing and integration testing; 2. End-to-end testing (functional testing). Functional testing is particularly time consuming, especially when testing different browsers

Integration is simple, out of the box, and powerful. The non-integrated ones are more flexible and can be combined arbitrarily

Test framework capabilities required for various test types:

  • Unit tests: Assertion Functions and Code Coverage Reporting Tool

Unit testing is generally used for functional programming and as pure as possible, the cleaner the easier it is to test

  • Integration tests: Mocks, Spies, and Stubs and Component Snapshot

Integration testing should cover important cross-module processes. Sometimes they extend to processes that span multiple classes, and sometimes to test different systems, such as front-end to back-end interactions

  • Functional tests: Control Browsers and Visual Regression Tools

Addendum: Test frameworks are recommended according to the JS framework

  • Vue: JEST (Unit Testing) + Vue Testing Library(component Testing) + Cypress (E2E Testing)
  • React: Jest (unit test) + enzyme(component test) + cypress(E2E test)
  • Angular: Jasmine (unit tests, component tests) + Karma (runner and test reports) + Protractor (E2E tests)

Author’s blog: blog.luojinming.com/archives/89…