通常来说，JS 开发者不习惯网站开发测试，JS 测试一般会很局限，难以实施，运行慢和写起来费时。
测试类型可以分为很多种，具体可以参考[reference]。但最主要有如下三种：
- 单元测试 Unit Tests- Testing of individual functions or classes by supplying input and making sure the output is as expected.
- 集成测试 Integration Tests- Testing processes or components to behave as expected, including the side effects.
- UI/功能测试 UI Tests- (A.K.A Functional Tests) Testing scenarios on the product itself, by controlling the browser or the website, regardless of the internal structure to ensure expected behavior.
测试工具可以分如下类，同时有些工具提供单一功能，有些兼具多种功能。
- Provide a testing structure (Mocha, Jasmine, Jest, Cucumber)
- Provide assertions functions (Chai, Jasmine, Jest, Unexpected)
- Generate, display, and watch test results (Mocha, Jasmine, Jest, Karma)
- Generate and compare snapshots of component and data structures to make sure changes from previous runs are intended (Jest, Ava)
- Provide mocks, spies, and stubs (Sinon, Jasmine, enzyme, Jest, testdouble)
- Generate code coverage reports (Istanbul, Jest, Blanket)
- Provide a browser or browser-like environment with a control on their scenarios execution (Protractor, Nightwatch, Phantom, Casper)
- Testing Structure, 测试用例的组织形式 - BDD 目前是业界主流.
- Assertion Functions
- Spies：provide us with information about functions(如函数被调用几次，被谁调用等)，用于 integration test 中的副作用是否符合预期
- Stubbing/dubbing - replace selected functions with selected functions to ensure an expected behavior on selected modules
- Mocks/Fakes: faking certain modules/behaviors to test different parts of processes.
- Snapshot Testing: compare data structure to an expected one
- Browser or browser-like environment: jsdom, headless browser environment, real browser environments
- the same tools for all the test types if possible
- testing structure and syntax (1), assertion functions (2), result reporting, and watching mechanism (4).
- creating two different processes
- This is because UI tests takes a longer time(运行不同浏览器之上，甚至通过SaaS运行在不同设备、操作系统和屏幕尺寸上
- cover all small pure units of the application- utils, services and helpers.
- with simple and edge case inputs
- coverage reporting tools to know what units are covered
- implement to use functional programming and pure functions as much as possible
- cover important cross-module processes.
- using component snapshot tests(test how processes affect selected components without actually render them or using a browser or browser-like environment.)
- using spies/stubs
- browser-like environment to deal with
windowand component rendering
- always running inside browser-like environment
- simulate user behavior(clicking, typing, scrolling etc…)
- hardest to set up(on different machines, devices, browser types and versions)
- probably using SaaS providor
Istanbul
- Istanbul will tell you how much of your code is covered with unit tests.
Karma
- Karma lets you run tests in browser and browser like environmentsincluding jsdom.
Chai
- Chai isthe most popular assertion library.
Sinon.JS
- Sinon is a very powerful standalone test spies, stubs and mocks for JavaScript that works with any unit testing framework.
Enzyme
- Enzyme is a JavaScript Testing utility for React that makes it easier to assert, manipulate, and traverse your React Components’ output.
Protractor
- Protractor is a library that wraps Selenium to add it an improved syntax and special in-built hooks for Angular.
Puppeteer
- Puppeteer isa Node.js library, developed by Google. It provides a convenient Node.js API to control Headless Chrome.
对比 Mocha，Jest，Jasmine，Ava 和 Tape。重点考察 Mocha 和 Jest。
most popular. community, extensibility, globals. Mocha runs independently from the [assertion library]. 要整合断言库（chai), stub/mock - sinon, istanbul(coverage) 等。
testing framework(aka mocha), recommended by Facebook. based on Jasmine, replace most of its functionality and add lots of features on top of it. 包括但不限于如下（要在项目中积极引入和使用）
- performance - clever parallel testing
- mechanism
- ui clear and convenient
- ready-to-go
- globals
- snapshot testing
- improved modules mocking
- code coverage: built-in code coverage based on Istanbul
- reliability and development
Protractor is a library that wraps Selenium to add it an improved syntax and special in-built hooks for Angular. Angular- Has special hooks, although can be successfully used with other JS frameworks too. Angular official documentation suggests using this tool. Error reporting- Good mechanism. Support- TypeScript support is available and the library is operated and maintained by the huge Angular team.
-
ReactTestUtils ReactTestUtils makes it easy to test React components in the testing framework of your choice. At Facebook we use Jest for painless JavaScript testing.
import ReactTestUtils from 'react-dom/test-utils'; // ES6 -
Shallow rendering Shallow rendering lets you render a component “one level deep” and assert facts about what its render method returns, without worrying about the behavior of child components, which are not instantiated or rendered. This does not require a DOM.
-
Test Renderer renderer that can be used to render React components to pure JavaScript objects(to grab a snapshot of the platform view hierarchy (similar to a DOM tree)), without depending on the DOM(so don't need browser or jsdom). using
react-test-renderer
When talking to assert, and manipulate your rendered components you can use react-testing-library, Enzyme, or React's TestUtils.
对比：
- react-testing-library（新选择），持续观察
- Enzyme（老牌）
目前在构建实施应用开发架构时，不仅仅要参考应用本身特点和特殊需求，还需要理解和结合目前前端社区和业界中被积极开发的一般性解决方案（如Snapshot Testing，Stream Data Process，Data Flow Architecture）。
基于我们选择的测试工具，来调整和“倒逼”我们的应用代码拆分，模块设计和具体函数编写等。
- 在 React 应用中，使用 Facebook 官方的方案，如 Jest+Enzyme
- 在 Node 应用中，使用基于 Mocha+Chai+Sinon.js的方案
- 在 一般性 JavaScript 应用中，使用基于 Mocha+Chai+Sinon.js的方案