Intro
Almost every development team is facing questions, like: How to enhance the quality of our code? How can I speed up the development process without having a degradation in the code quality?
"Before you implement, write the test" (Microsoft Research)
Why should I test?
It's important to understand: tests don't Improve quality, developers do.
JavaScript development could easily go to hell if the right conventions are not followed. This makes it necessary to utilize the right development and unit testing tools.
Pre-work - Writing tests first give you a clearer view on your API design.
It makes you think of the special cases in your algorithm.
Do you as a developer understand the problem enough to articulate in code all critical component requirements ?
You cannot remember all features that need testing. After making a change to refactor as an example: add new features, remove features and so on...
Automatically prevent broken builds from being deployed to production by testing.
Testing the Client vs. Testing the Back-end
Client tests focus on testing the usability and responsiveness of an application, whereas the back-end unit testing frameworks, focus on testing business logic and other micro-services. You should test them both !
Do I need the browser for these tests?
Not really, JavaScript unit tests for front-end mainly run on actual or headless browsers.
Understand the levels of testing (Microsoft Test Taxonomy)
L0/L1 - Unit tests
L0 - Broad class of fast in-memory unit tests. A L0 test is a unit test to most people. That is a test that depends on code in the assembly under test and nothing else.
L1 - A L1 test might require the assembly plus SQL or the file system.
L2/L3 - Functional tests
L2 - Functional tests run against "testable" service deployment. It is a functional test category that requires a service deployment but may have key service dependencies stubbed out in some way.
L3 - This is a restricted class of integration tests that run against production. They require a full product deployment.
Other Types of Testing that I will not talk about it in this article are:
Beta Tests
Alpha Tests
Regression Tests
Buddy Tests
Shift-Left
This terminology means that we want more L0/L1 tests compare to the L2/3 tests. We want more unit tests, easy to write, easy to maintain and less overhead.
Determining the code coverage types
Function coverage - Has each one of your functions in your program been called?
Statement coverage - Has each statement in the program been executed?
Branch coverage - Has each branch of each control structure, such as in 'if' and 'case' statements been executed? For example, given an 'if' statement, have both the true and false branches been executed?
Condition coverage - Has each Boolean sub-expression evaluated both to true and false?
Review the Most common Frameworks and testing environments (There are many more, focus on the common ones)
First you must distinguish between the Test Framework to the Runner environment itself.
Jest
is a test runner, assertion and mocking library - basically, a JavaScript unit testing framework. Single framework fit for NodeJS, VueJS, React, Angular and other Babel based projects. Well documented. Jest provides also Snapshot testing an ability to create a snapshot of a component during run-time and compare it with a previously created 'snapshot'. With live snapshots, it allows managing tests with larger objects.
Enzyme
is a JavaScript test utility for React applications that enables swift testing and interacting with elements. Enzyme is created by Airbnb. Both Jest and Enzyme are designed to test React applications. However, Jest works with any JavaScript applications like Angular and others, Enzyme is created for React. Jest, on its own, without Enzyme can render components and perform Snapshot testing as well. It is just that, Enzyme adds additional functionality to the testing. Jest and Enzyme are complementary tools that integrate well to provide effective test results.
Karma
is the default test runner for Angular applications. Karma includes the option to test the code on several browsers and even devices to ensure smooth operation of the code on the supported platforms.
Jasmine
is a Behavior-Driven Development (BDD) framework which enables clean and understandable Syntax for writing test cases making the process easy. It does not depend upon any other JavaScript frameworks. Alongside Karma, Jasmine is the recommended testing framework for Angular, and it actually doesn't require a DOM.
Mocha
is a JavaScript based automated test framework meant for testing applications that run using Node.js. Mocha is very common today.
Selenium
WebDriver is the most widely accepted automation testing framework for web-applications, mainly for UI tests and for end to end tests.
Protractor
framework dedicated to testing Angular applications. It is an end to end automation testing framework dedicated for testing your angular application on a real browser. It means that it is making automated interaction just like the real user.
React Testing Library
builds on top of DOM Testing Library by adding APIs for working with React components. Comes to solve the problem while you want your tests to avoid including implementation details of your components and rather focus on making your tests give you the confidence for which they are intended. As part of this, you want your test base to be maintainable in the long run so refactors of your components (changes to implementation but not functionality) don't break your tests and slow you and your team down!
Conclusion, How to pick the right one for my Teams?
It's really depends on your needs and your JavaScript framework/Library that you picked for your project. Let me share with you my opinion from the years that I managed development teams, for Angular I will vote Karma & Jasmine, whereas for React I will vote Jest and Enzyme and of course to enhance the power of your tests I will add React Testing Library as well.
References & Links:
https://docs.microsoft.com/en-us/azure/devops/learn/devops-at-microsoft/shift-left-make-testing-fast-reliable
https://jestjs.io/
https://karma-runner.github.io/latest/index.html
https://jasmine.github.io/
https://github.com/airbnb/enzyme
https://www.robinwieruch.de/react-testing-jest-enzyme
https://testing-library.com/docs/react-testing-library/intro
http://definitiontech.co/top-4-unit-testing-tools-for-angular-and-react-applications/
https://mochajs.org/
https://www.protractortest.org/#/
https://applitools.com/tutorials/selenium-javascript.html
https://medium.com/@richbray/why-should-you-write-tests-910a3175d33c
https://en.wikipedia.org/wiki/Code_coverage
https://help.crossbrowsertesting.com/selenium-testing/getting-started/javascript/
https://www.guru99.com/code-coverage.html
Top comments (0)