Frontend testing
Test types
Unit. Testing of individual components (modules) of the application.
Integration. Testing component interaction with outer world. I/O, side-effects, UI.
E2E/functional/UI. Testing application from the user’s perspective.
What is what?
Terms
Test structure – test organisation and syntax, nowadays it's BDD as a rule.
Assertions (assertion functions) – functions that make sure that tested variables contain the expected value.
Snapshot – stringified "picture" of rendered component, used to compare with last taken snapshot.
Mocks, spies, stubs – functions-helpers allowing to track and provide the desired behavior.
Browser (browser-like) enviroment – "live" enviroment to run tests: browser emulation, headless browser, real browser.
Tools
- Test structure (Jest, Mocha, Jasmine, Cucumber)
- Assertions (Jest, Chai, Jasmine, Unexpected)
- Generate, display, and watch test results (Jest, Mocha, Jasmine, Karma)
- Snapshots (Jest, Ava)
- Mocks, spies, stubs (Jest, Sinon, Jasmine, enzyme, testdouble)
- Generate code coverage reports (Jest, Istanbul, Blanket)
- Browser (browser-like) enviroment (JSDOM, Selenium, TestCafe, Cypress)
Testing process
e2e
Integration
Unit
- run unit + integration before commit (use husky + lint-staged)
- run e2e before merging your feature
- e2e are slow
- e2e are harder to write
- Unit + integration tests make
sure enough as a rule
How many tests
we need?
Tips
$$$
$
Sources
- https://medium.com/welldone-software/an-overview-of-javascript-testing-in-2018-f68950900bc3
- https://hackernoon.com/testing-your-frontend-code-part-i-introduction-7e307eac4446
- https://hackernoon.com/testing-your-frontend-code-part-ii-unit-testing-1d05f8d50859
- https://hackernoon.com/testing-your-frontend-code-part-iii-e2e-testing-e9261b56475
- https://hackernoon.com/testing-your-frontend-code-part-iv-integration-testing-f1f4609dc4d9
- https://www.sitepoint.com/javascript-testing-unit-functional-integration/
- https://frontendmasters.com/books/front-end-handbook/2018/tools/testing.html
- https://stackoverflow.com/questions/520064/what-is-unit-test-integration-test-smoke-test-regression-test
- https://vue-test-utils.vuejs.org/
- https://alexjoverm.github.io/2017/08/21/Write-the-first-Vue-js-Component-Unit-Test-in-Jest/
- https://hackernoon.com/a-modern-way-to-do-e2e-testing-for-vue-js-apps-cebe0a07499c
- https://alligator.io/vuejs/e2e-testing-testcafe/
- https://github.com/wemake-services/wemake-vue-template
Thank you!
Frontend testing
By Georgiy Bukharov
