What is Mocha?
- There are several installation options: Depending on the project requirements, developers can choose how to install and use Mocha JS. For example, if you want to use it with NodeJS, you can install Mocha either locally or globally using specific commands. It is also possible to configure Mocha on the client side and run unit tests in the web browser.
- It integrates reasonably well with NodeJS: It is self-evident, given that the Mocha test framework runs on NodeJS. As a result, Mocha’s simple syntax and fast execution make testing your Node.js app a breeze. Mocha also has a plethora of plugins and extensions for testing unique scenarios.
- Allows for the use of various reporters as well as customization: Mocha provides developers with a number of built-in test reporters. You can use dot matrix, nyan, tap, landing strip, list, progress, and JSON reporters. You also have the option of creating your own customized one. The full-color test reporters allow you to check the execution and output.
Then, we will add some scripts in the body tag to add a new function that we will be using for our test cases. Post that, we will import a locally created js file in the same code base inside a script tag. Opening up the js file, we will create a test case that will utilize and test the function created in the script tag. We will then execute the different cases and check out how Mocha passes and fails the test cases. On completion, we will add new test cases to test the asynchronous functionality of a function with hooks. We will first run the test case synchronously and check Mocha’s result. To clear the test case, since it is required to perform an async operation, we will then add a timeout to utilize the async capability and run the test case again which will then return the positive results of the test cases for all the hooks added in the function.
You will be navigated to a dashboard with some default files created.
Remove the content from the index.js file.
Open the index.html file and remove the existing content.
Add the HTML opening and closing tags.
Now, add the following content in the HTML tag. We will import the mocha CSS and the mocha js cdn. Inside the script tag, we will create a setup for mocha using the inbuilt function of mocha.
Under dependencies, enter mocha and press the enter key.
On success, you will see the message Installing Dependencies.
On successful installation, you’ll see the mocha package with its version mentioned in the left navigation pane.
Open the package.json file and you’ll see the mocha package installed with its version.
Now, add a body tag inside which adds a script tag with a function pow in it.
Add another script tag, importing the index.js file.
Add a div tag that will print the output of the pass or fail of tesys in it and then add a script tag inside which adds mocha.run() that will help us run the test cases.
You’ll see the output on the UI as shown in the image below.
Add the following test case in the index.js file. On saving the file, you will see that the test case failed since assert is not defined. So, the failure count changed to 1 and the following error is displayed on the UI.
Remove the assert key from the code and save the file.
On success, you will see that the test case has now passed and the pass count will increase.
You will click on the expand arrow to see the test case condition.
Add a few more test cases in the index.js file and save the file. Click on open in the new tab.
Refresh the UI and you will see the following result with the pass and fail count.
Now, let’s add some logic for the pow function. This will return the required value after the needed calculations. On adding the selected code in the below snippet, save the changes.
Now, refresh the UI and you will see that all the test cases have cleared. The pass counter will thereby increase as well.
Now, let’s add a new test case for printing the required alert messages based on the hooks and displaying whether the function results in a pass or fail.
On saving the changes and refreshing the UI, you will get the first alert pop-up. Press ok.
You will see that the before all hooks failed because of the timeout.
Now, the last hooks alert message will pop up. Hit ok.
You will see that both hooks failed since they were performing async operations and returning a promise without being resolved.
Now, in order to pass those tests, let’s make some code changes to add timeouts in order to run async operations. Navigate back to the code editor and open the index.js file.
Make the following changes in the code as shown in the image below and save the changes.
Now, refresh the UI. You’ll see the sequence of alerts popping up. Keep pressing Ok and the message on the alert boxes will take you through the sequence. The first test case will then pass.
Similarly, for test 2, the second test case will pass too.
On the top right of the page, you will get to see the time it took overall to execute the same.
Then, we added some more scripts in the body tag to create a new function that we used for our test cases. Post that, we imported a locally created js file in the same code base inside a script tag. Opening up the js file, we created a test case that utilized and tested the function created in the script tag. We then executed the different cases and checked out how Mocha passes and fails the test cases. On completion, we added new test cases to test the asynchronous functionality of a function with hooks. We first ran the test case synchronously and checked Mocha’s result. To clear the test case, since it was required to perform an async operation, we then added a timeout to utilize the async capability and ran the test case again which then returned the positive results of the test cases for all the hooks added in the function. We will come up with more such use cases in our upcoming blogs.
If you are an aspiring Frontend Developer and want to explore more about the above topics, here are a few of our blogs for your reference:
- How to make use of an npm package Highcharts to plot Network Graphs in Angular?
- How to Build a Hybrid App using React Native?
Keep Exploring -> Keep Learning -> Keep Mastering
At Workfall, we strive to provide the best tech and pay opportunities to kickass coders around the world. If you’re looking to work with global clients, build cutting-edge products and make big bucks doing so, give it a shot at workfall.com/partner today!