Think twice, cut once.
A paradigm that has guided software engineers and developers over the years. Planning and thinking things out before beginning to code helps make development a lot easier and helps with developing more accurate software at the end of the construction process.
However not everything is dealt with, as some bugs still get to pass through the firewall. Getting to correct errors after development is a lot more difficult, this is why I have decided to write an article to tackle this issue.
There are lots of tools out there to help make development easy, increase productivity and increase the robustness of our software. But we are going to take a look at a couple of testing and debugging tools. Each one of them very powerful in their rights when used to their strengths.
The tools include:
- Chrome Dev Tools
- Redux Dev Tools
Lets‘s take a look at these beautiful testing and debugging tools.
Version 22.4.1 / 16 883 GitHub ★ / 2 Dependencies
Jest is a popular testing tool maintained by Facebook and used majorly in the testing of React applications.
It is a very simple and easy to use framework, as all it does it to checkout and test the required files and displays the results of the test.
As with almost everything handled by Facebook, Jest comes with tons of features to make testing easier for every developer.
Jest supports asynchronous testing which means more can be done in less time as tests are run as parallel processes.
Jest also allows for the mocking of objects in testfiles with such as function and timer mocking features.
You can also get to carryout snapshot tests when working with Jest on React applications, so you can very easily know the change that caused a failure.
Those are some of the lovely features of this amazing framework. Others include code coverage support, ability to integrate completely with other libraries, test isolation and so much more.
Jest is easily installed and setup thanks to the npm tool:
You can install locally using:
npm install --save-dev jest
You can also install globally using:
npm install -g jest
To learn more about this framework maintained by Facebook, kindly check out the github repository.
Version 5.1.0 / 15 138 GitHub ★ / 11 Dependencies
Here is another popular framework for carrying out unit and integration tests. Mocha is a Node.js dependent test framework with lots of incredible features.
Mocha is lightweight and also simple to use.
With features such as browser support, test coverage support, asynchronous testing, timeout support and a lot of other features. Mocha has become the choice of a lot of developers, considering the fact that it is lightweight and doesn‘t make insane demands of computer resources.
Installing Mocha is pretty simple with npm.
A local installation can be done with:
npm install --save-dev mocha
It can also be done globally with:
npm install --global mocha
To know more about Mocha, you can visit the Github page.
Version 2.1.0 / 4 735 GitHub ★ / 38 Dependencies
Are you a front-end developer or have anyone around you? Call them over. Cypress.io is a very powerful open source front-end testing tool that aids and improves the web development process.
Cypress.io is one of the simplest tools to use that you would ever find, everything is very easy to do including the setting up of tests, writing of tests, running of tests and the debugging of tests.
With Cypress.io you can write all sort of tests from end to end tests to integration tests to unit tests, due to this functionality it has earned the comparison to Selenium by Quality Assurance testers. However, developers who have used both would admit that Cypress.io is much more functional.
Cypress.io comes with amazing features such as snapshot tests which they refer to as “Time Travel“, the automatic waiting feature, ability to control the behaviour of functions and server responses and integrates effectively with debugging tools such as Chrome DevTools which would be looked at later in this article.
You can install Cypress.io using the npm command as well.
A local installation can be done with:
npm install cypress --save-dev
Cypress.io is very easy to use and properly documented as well. To know more about this wonderful framework, check out its documentation.
Version 1.0.548690 / 693 GitHub ★ / 0 Dependencies
Google is out to make life easy for software developers, and that is clear for everyone to see.
Chrome DevTools come with different panels:
- The timeline panel for improving the rendering performance of webpages.
- The resources panel for inspecting the the storage of webpages such as the HTML5 database, cookies, local storage etc.
You may have been using Chrome all these years without knowing that it has a debugging tool with so much power.
There are lot of tutorials on how to make best of Chrome DevTools on the internet, as you can do a whole lot with this tool to increase productivity.
Version 3.4.1 / 39 897 GitHub ★ / 3 Dependencies
Here is another tool just as powerful as the Chrome DevTools, however this is used to debug Redux applications only.
Redux DevTools is great for debugging code in its application state, it is very easy to use and install with very beautiful user interface which can be customized to your taste.
It comes with features such as allowing you inspect every payload, snapshotting versions of your code which means you can restore previous versions of code, you can also persist debug sessions when a webpage reloads.
You can integrate Redux DevTools into your project simply by cloning the project:
git clone https://github.com/gaearon/redux-devtools.git cd redux-devtools
Then you can the run the following in the root folder:
You can finally proceed to the your application folder and then run the npm install command again.
Then you can run the development server:
npm start open http://localhost:3000
If you do not want to go through the “troubles“ of installing the tool, you can easily make use of the browser extension.
- Jest is best for testing React apps.
- Mocha is best for testing Node apps.
- Cypress is best for testing front-end code.
On the other hand, we discussed one general debugging tool and then a specialized tool.
While Google Chrome DevTools is very great for debugging front-end code and can easily be integrated with testing tools such as Cypress, Redux DevTools is used specifically for debugging Redux apps and also have a browser extension, and can be used on browsers such as Chrome and Mozilla Firefox.