{"id":52427,"date":"2023-06-14T06:58:26","date_gmt":"2023-06-14T06:58:26","guid":{"rendered":"https:\/\/www.bridge-global.com\/blog\/?p=52427"},"modified":"2023-06-15T05:48:05","modified_gmt":"2023-06-15T05:48:05","slug":"jest-a-javascript-testing-framework","status":"publish","type":"post","link":"https:\/\/www.bridge-global.com\/blog\/jest-a-javascript-testing-framework\/","title":{"rendered":"Jest: A JavaScript Testing Framework"},"content":{"rendered":"<div class=\"vce-row-container\" data-vce-boxed-width=\"true\"><div class=\"vce-row vce-row--col-gap-30 vce-row-equal-height vce-row-content--top\" id=\"el-2aa160cf\" data-vce-do-apply=\"all el-2aa160cf\"><div class=\"vce-row-content\" data-vce-element-content=\"true\"><div class=\"vce-col vce-col--md-auto vce-col--xs-1 vce-col--xs-last vce-col--xs-first vce-col--sm-last vce-col--sm-first vce-col--md-last vce-col--lg-last vce-col--xl-last vce-col--md-first vce-col--lg-first vce-col--xl-first\" id=\"el-3fc662cb\"><div class=\"vce-col-inner\" data-vce-do-apply=\"border margin background  el-3fc662cb\"><div class=\"vce-col-content\" data-vce-element-content=\"true\" data-vce-do-apply=\"padding el-3fc662cb\"><div class=\"vce-text-block\"><div class=\"vce-text-block-wrapper vce\" id=\"el-d96a3e9a\" data-vce-do-apply=\"all el-d96a3e9a\"><div><noscript><style>.vce-row-container .vcv-lozad {display: none}<\/style><\/noscript><\/div>\n<div>\n<div><noscript><style>.vce-row-container .vcv-lozad {display: none}<\/style><\/noscript><\/div>\n<div>\n<p>Unit testing is an essential practice in any <a href=\"..\/..\/services\/custom-software-development\" target=\"_blank\" rel=\"noopener\">software development<\/a> project. It involves testing individual components or units of code to ensure they work as intended. With the rise of new frameworks and technologies, it's important to incorporate unit testing into your development workflow.<\/p>\n<h2>Jest: An Overview<\/h2>\n<p><a href=\"https:\/\/jestjs.io\/\" target=\"_blank\" rel=\"noopener\">Jest<\/a>, the JavaScript testing framework created by Facebook, stands as a testament to originality and innovation. It's an <a href=\"..\/..\/services\/custom-software-development\/open-source-software-development\" target=\"_blank\" rel=\"noopener\">open source<\/a> tool that helps developers write automated tests for their JavaScript code. Jest provides a simple and powerful way to test your code and ensure that it works as expected. It's also very easy to set up and use, making it a popular choice for many developers.<\/p>\n<h2>Features of Jest<\/h2>\n<p>Jest has several features that make it a powerful testing tool for JavaScript developers. A few features are below:<\/p>\n<p><strong>Easy to use:<\/strong> Jest is easy to set up and use, even for developers who are new to testing. It has a simple and intuitive API that makes it easy to write tests for your JavaScript code.<\/p>\n<p><strong>Fast and efficient:<\/strong> Jest runs tests in parallel, making it faster and more efficient than many other testing frameworks.<\/p>\n<p><strong>Snapshot testing:<\/strong> Jest allows you to take snapshots of your code and compare them to previous snapshots to ensure that nothing has changed unexpectedly.<\/p>\n<p><strong>Mocking:<\/strong> Jest has built-in mocking support, allowing you to simulate different scenarios in your tests.<\/p>\n<p><strong>Code coverage:<\/strong> Jest can generate code coverage reports to show you how much of your code is covered by your tests.<\/p>\n<p><strong>Integration with other tools:<\/strong> Jest integrates with other tools like Babel, webpack, and ESLint, making it easy to incorporate into your development workflow.<\/p>\n<h3><strong>Using Jest in a Node.js based Project<\/strong><\/h3>\n<p>To incorporate Jest into a Node-based project, follow these steps for creating and installing Jest within the project:<\/p>\n<p><strong>1. <\/strong>Begin by creating a folder with the desired project name, such as \"jestNodeProject.<\/p>\n<p><strong>2.<\/strong> \"Use the terminal or command line to navigate to the project directory and execute the npm init script with the following command:&nbsp;<\/p>\n<\/div>\n<\/div>\n<div><!--Start of Tawk.to Script (0.7.1)--> <!--End of Tawk.to Script (0.7.1)--><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><div class=\"vce-row-container\" data-vce-boxed-width=\"true\"><div class=\"vce-row vce-row--col-gap-30 vce-row-equal-height vce-row-content--top\" id=\"el-ce94e6f9\" data-vce-do-apply=\"all el-ce94e6f9\"><div class=\"vce-row-content\" data-vce-element-content=\"true\"><div class=\"vce-col vce-col--md-auto vce-col--xs-1 vce-col--xs-last vce-col--xs-first vce-col--sm-last vce-col--sm-first vce-col--md-last vce-col--lg-last vce-col--xl-last vce-col--md-first vce-col--lg-first vce-col--xl-first\" id=\"el-092c385b\"><div class=\"vce-col-inner\" data-vce-do-apply=\"border margin background  el-092c385b\"><div class=\"vce-col-content\" data-vce-element-content=\"true\" data-vce-do-apply=\"padding el-092c385b\"><div class=\"vce-widgets-container\"><div class=\"vce vce-widgets-wrapper\" id=\"el-a65cb5ba\" data-vce-do-apply=\"all el-a65cb5ba\">\t\t\t<div class=\"textwidget\"><pre class=\"brush: css; html-script: true; light: true; title: ; notranslate\" title=\"\"> \nnpm init\n<\/pre>\n<\/div>\n\t\t<\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><div class=\"vce-row-container\" data-vce-boxed-width=\"true\"><div class=\"vce-row vce-row--col-gap-30 vce-row-equal-height vce-row-content--top\" id=\"el-b69a8b19\" data-vce-do-apply=\"all el-b69a8b19\"><div class=\"vce-row-content\" data-vce-element-content=\"true\"><div class=\"vce-col vce-col--md-auto vce-col--xs-1 vce-col--xs-last vce-col--xs-first vce-col--sm-last vce-col--sm-first vce-col--md-last vce-col--lg-last vce-col--xl-last vce-col--md-first vce-col--lg-first vce-col--xl-first\" id=\"el-c1687043\"><div class=\"vce-col-inner\" data-vce-do-apply=\"border margin background  el-c1687043\"><div class=\"vce-col-content\" data-vce-element-content=\"true\" data-vce-do-apply=\"padding el-c1687043\"><div class=\"vce-text-block\"><div class=\"vce-text-block-wrapper vce\" id=\"el-d2f063d8\" data-vce-do-apply=\"all el-d2f063d8\"><p><strong>3.<\/strong> Upon executing the above command, you will be prompted with various questions and parameters for project details, including the project name, version, etc. Simply press enter to accept the default values. After completion, a package.json file will be created in the project directory. This file is crucial for configuring any node-based project.<\/p><p><strong>4.<\/strong> Install the Jest package into the newly created project by executing the following command:<\/p><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><div class=\"vce-row-container\" data-vce-boxed-width=\"true\"><div class=\"vce-row vce-row--col-gap-30 vce-row-equal-height vce-row-content--top\" id=\"el-85bcd926\" data-vce-do-apply=\"all el-85bcd926\"><div class=\"vce-row-content\" data-vce-element-content=\"true\"><div class=\"vce-col vce-col--md-auto vce-col--xs-1 vce-col--xs-last vce-col--xs-first vce-col--sm-last vce-col--sm-first vce-col--md-last vce-col--lg-last vce-col--xl-last vce-col--md-first vce-col--lg-first vce-col--xl-first\" id=\"el-8a553854\"><div class=\"vce-col-inner\" data-vce-do-apply=\"border margin background  el-8a553854\"><div class=\"vce-col-content\" data-vce-element-content=\"true\" data-vce-do-apply=\"padding el-8a553854\"><div class=\"vce-widgets-container\"><div class=\"vce vce-widgets-wrapper\" id=\"el-a83a41da\" data-vce-do-apply=\"all el-a83a41da\">\t\t\t<div class=\"textwidget\"><pre class=\"brush: css; html-script: true; light: true; title: ; notranslate\" title=\"\"> \nnpm install --save-dev jest\n<\/pre>\n<\/div>\n\t\t<\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><div class=\"vce-row-container\" data-vce-boxed-width=\"true\"><div class=\"vce-row vce-row--col-gap-30 vce-row-equal-height vce-row-content--top\" id=\"el-b7bc6d43\" data-vce-do-apply=\"all el-b7bc6d43\"><div class=\"vce-row-content\" data-vce-element-content=\"true\"><div class=\"vce-col vce-col--md-auto vce-col--xs-1 vce-col--xs-last vce-col--xs-first vce-col--sm-last vce-col--sm-first vce-col--md-last vce-col--lg-last vce-col--xl-last vce-col--md-first vce-col--lg-first vce-col--xl-first\" id=\"el-a9519ef6\"><div class=\"vce-col-inner\" data-vce-do-apply=\"border margin background  el-a9519ef6\"><div class=\"vce-col-content\" data-vce-element-content=\"true\" data-vce-do-apply=\"padding el-a9519ef6\"><div class=\"vce-text-block\"><div class=\"vce-text-block-wrapper vce\" id=\"el-08c9216e\" data-vce-do-apply=\"all el-08c9216e\"><p>This command will install the Jest module and its dependencies.<\/p><p><strong>5.<\/strong> At this point, the node project is ready with Jest bindings. Update the package.json file , for configure the npm test script and run the Jest tests, by adding the following script section:<\/p><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><div class=\"vce-row-container\" data-vce-boxed-width=\"true\"><div class=\"vce-row vce-row--col-gap-30 vce-row-equal-height vce-row-content--top\" id=\"el-719bf4a6\" data-vce-do-apply=\"all el-719bf4a6\"><div class=\"vce-row-content\" data-vce-element-content=\"true\"><div class=\"vce-col vce-col--md-auto vce-col--xs-1 vce-col--xs-last vce-col--xs-first vce-col--sm-last vce-col--sm-first vce-col--md-last vce-col--lg-last vce-col--xl-last vce-col--md-first vce-col--lg-first vce-col--xl-first\" id=\"el-3959f6f6\"><div class=\"vce-col-inner\" data-vce-do-apply=\"border margin background  el-3959f6f6\"><div class=\"vce-col-content\" data-vce-element-content=\"true\" data-vce-do-apply=\"padding el-3959f6f6\"><div class=\"vce-widgets-container\"><div class=\"vce vce-widgets-wrapper\" id=\"el-2d4fe02d\" data-vce-do-apply=\"all el-2d4fe02d\">\t\t\t<div class=\"textwidget\"><pre class=\"brush: css; html-script: true; light: true; title: ; notranslate\" title=\"\"> \n&quot;scripts&quot;: {\n  &quot;test&quot;: &quot;jest&quot;\n}\n<\/pre>\n<\/div>\n\t\t<\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><div class=\"vce-row-container\" data-vce-boxed-width=\"true\"><div class=\"vce-row vce-row--col-gap-30 vce-row-equal-height vce-row-content--top\" id=\"el-63f589c6\" data-vce-do-apply=\"all el-63f589c6\"><div class=\"vce-row-content\" data-vce-element-content=\"true\"><div class=\"vce-col vce-col--md-auto vce-col--xs-1 vce-col--xs-last vce-col--xs-first vce-col--sm-last vce-col--sm-first vce-col--md-last vce-col--lg-last vce-col--xl-last vce-col--md-first vce-col--lg-first vce-col--xl-first\" id=\"el-6e5eb078\"><div class=\"vce-col-inner\" data-vce-do-apply=\"border margin background  el-6e5eb078\"><div class=\"vce-col-content\" data-vce-element-content=\"true\" data-vce-do-apply=\"padding el-6e5eb078\"><div class=\"vce-text-block\"><div class=\"vce-text-block-wrapper vce\" id=\"el-cb01de89\" data-vce-do-apply=\"all el-cb01de89\"><p>The final package.json file will resemble the example shown below:<\/p><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><div class=\"vce-row-container\" data-vce-boxed-width=\"true\"><div class=\"vce-row vce-row--col-gap-30 vce-row-equal-height vce-row-content--top\" id=\"el-55392212\" data-vce-do-apply=\"all el-55392212\"><div class=\"vce-row-content\" data-vce-element-content=\"true\"><div class=\"vce-col vce-col--md-auto vce-col--xs-1 vce-col--xs-last vce-col--xs-first vce-col--sm-last vce-col--sm-first vce-col--md-last vce-col--lg-last vce-col--xl-last vce-col--md-first vce-col--lg-first vce-col--xl-first\" id=\"el-88d1d3b8\"><div class=\"vce-col-inner\" data-vce-do-apply=\"border margin background  el-88d1d3b8\"><div class=\"vce-col-content\" data-vce-element-content=\"true\" data-vce-do-apply=\"padding el-88d1d3b8\"><div class=\"vce-widgets-container\"><div class=\"vce vce-widgets-wrapper\" id=\"el-85e52c96\" data-vce-do-apply=\"all el-85e52c96\">\t\t\t<div class=\"textwidget\"><pre class=\"brush: css; html-script: true; light: true; title: ; notranslate\" title=\"\"> \n{\n  &quot;name&quot;: &quot;jest-e2e&quot;,\n  &quot;version&quot;: &quot;1.0.0&quot;,\n  &quot;description&quot;: &quot;&quot;,\n  &quot;main&quot;: &quot;index.js&quot;,\n  &quot;scripts&quot;: {\n    &quot;test&quot;: &quot;jest&quot;\n  },\n  &quot;author&quot;: &quot;&quot;,\n  &quot;license&quot;: &quot;ISC&quot;,\n  &quot;dependencies&quot;: {\n    &quot;jest&quot;: &quot;^25.1.0&quot;\n  }\n}\n<\/pre>\n<\/div>\n\t\t<\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><div class=\"vce-row-container\" data-vce-boxed-width=\"true\"><div class=\"vce-row vce-row--col-gap-30 vce-row-equal-height vce-row-content--top\" id=\"el-1362dcc6\" data-vce-do-apply=\"all el-1362dcc6\"><div class=\"vce-row-content\" data-vce-element-content=\"true\"><div class=\"vce-col vce-col--md-auto vce-col--xs-1 vce-col--xs-last vce-col--xs-first vce-col--sm-last vce-col--sm-first vce-col--md-last vce-col--lg-last vce-col--xl-last vce-col--md-first vce-col--lg-first vce-col--xl-first\" id=\"el-5e888884\"><div class=\"vce-col-inner\" data-vce-do-apply=\"border margin background  el-5e888884\"><div class=\"vce-col-content\" data-vce-element-content=\"true\" data-vce-do-apply=\"padding el-5e888884\"><div class=\"vce-text-block\"><div class=\"vce-text-block-wrapper vce\" id=\"el-239c217d\" data-vce-do-apply=\"all el-239c217d\"><p>You have successfully integrated Jest into your Node-based project and configured the npm test script to execute Jest framework-based tests by completing these steps.<\/p><h2>Writing some sample tests for a JavaScript function<\/h2><p>When it comes to writing tests for a JavaScript function, we'll start by creating a code snippet that performs addition, subtraction, and multiplication of two numbers. Subsequently, we'll develop the corresponding Jest-based tests. Let's examine the code for our application or function under test.<\/p><p>Within the node project established in the previous section, create a JavaScript file named \"calculator.js\" with the following content:<\/p><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><div class=\"vce-row-container\" data-vce-boxed-width=\"true\"><div class=\"vce-row vce-row--col-gap-30 vce-row-equal-height vce-row-content--top\" id=\"el-6b38e2d2\" data-vce-do-apply=\"all el-6b38e2d2\"><div class=\"vce-row-content\" data-vce-element-content=\"true\"><div class=\"vce-col vce-col--md-auto vce-col--xs-1 vce-col--xs-last vce-col--xs-first vce-col--sm-last vce-col--sm-first vce-col--md-last vce-col--lg-last vce-col--xl-last vce-col--md-first vce-col--lg-first vce-col--xl-first\" id=\"el-1651b804\"><div class=\"vce-col-inner\" data-vce-do-apply=\"border margin background  el-1651b804\"><div class=\"vce-col-content\" data-vce-element-content=\"true\" data-vce-do-apply=\"padding el-1651b804\"><div class=\"vce-widgets-container\"><div class=\"vce vce-widgets-wrapper\" id=\"el-a2fa51f3\" data-vce-do-apply=\"all el-a2fa51f3\">\t\t\t<div class=\"textwidget\"><pre class=\"brush: css; html-script: true; light: true; title: ; notranslate\" title=\"\"> \nconst mathOperations = {\n   sum: function(a,b) {\n       return a + b;\n   },   \n   diff: function(a,b) {\n       return a - b;\n   },\n   product: function(a,b) {\n       return a * b;\n   }\n};\nmodule.exports = mathOperations;\n<\/pre>\n<\/div>\n\t\t<\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><div class=\"vce-row-container\" data-vce-boxed-width=\"true\"><div class=\"vce-row vce-row--col-gap-30 vce-row-equal-height vce-row-content--top\" id=\"el-aff420d7\" data-vce-do-apply=\"all el-aff420d7\"><div class=\"vce-row-content\" data-vce-element-content=\"true\"><div class=\"vce-col vce-col--md-auto vce-col--xs-1 vce-col--xs-last vce-col--xs-first vce-col--sm-last vce-col--sm-first vce-col--md-last vce-col--lg-last vce-col--xl-last vce-col--md-first vce-col--lg-first vce-col--xl-first\" id=\"el-dc1cec77\"><div class=\"vce-col-inner\" data-vce-do-apply=\"border margin background  el-dc1cec77\"><div class=\"vce-col-content\" data-vce-element-content=\"true\" data-vce-do-apply=\"padding el-dc1cec77\"><div class=\"vce-text-block\"><div class=\"vce-text-block-wrapper vce\" id=\"el-ed02de16\" data-vce-do-apply=\"all el-ed02de16\"><p>Next, generate a test file named \"calculator.test.js\" within the same folder. Jest expects this naming convention to identify files containing Jest-based tests. Also, import the function under test to execute the code within the test. Here is the initial file with the import\/require declaration:<\/p><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><div class=\"vce-row-container\" data-vce-boxed-width=\"true\"><div class=\"vce-row vce-row--col-gap-30 vce-row-equal-height vce-row-content--top\" id=\"el-37f36a07\" data-vce-do-apply=\"all el-37f36a07\"><div class=\"vce-row-content\" data-vce-element-content=\"true\"><div class=\"vce-col vce-col--md-auto vce-col--xs-1 vce-col--xs-last vce-col--xs-first vce-col--sm-last vce-col--sm-first vce-col--md-last vce-col--lg-last vce-col--xl-last vce-col--md-first vce-col--lg-first vce-col--xl-first\" id=\"el-446fc8e9\"><div class=\"vce-col-inner\" data-vce-do-apply=\"border margin background  el-446fc8e9\"><div class=\"vce-col-content\" data-vce-element-content=\"true\" data-vce-do-apply=\"padding el-446fc8e9\"><div class=\"vce-widgets-container\"><div class=\"vce vce-widgets-wrapper\" id=\"el-5bef085e\" data-vce-do-apply=\"all el-5bef085e\">\t\t\t<div class=\"textwidget\"><pre class=\"brush: css; html-script: true; light: true; title: ; notranslate\" title=\"\"> \nconst mathOperations = require(&#039;.\/calculator&#039;);\n<\/pre>\n<\/div>\n\t\t<\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><div class=\"vce-row-container\" data-vce-boxed-width=\"true\"><div class=\"vce-row vce-row--col-gap-30 vce-row-equal-height vce-row-content--top\" id=\"el-416fa70b\" data-vce-do-apply=\"all el-416fa70b\"><div class=\"vce-row-content\" data-vce-element-content=\"true\"><div class=\"vce-col vce-col--md-auto vce-col--xs-1 vce-col--xs-last vce-col--xs-first vce-col--sm-last vce-col--sm-first vce-col--md-last vce-col--lg-last vce-col--xl-last vce-col--md-first vce-col--lg-first vce-col--xl-first\" id=\"el-172e2b8e\"><div class=\"vce-col-inner\" data-vce-do-apply=\"border margin background  el-172e2b8e\"><div class=\"vce-col-content\" data-vce-element-content=\"true\" data-vce-do-apply=\"padding el-172e2b8e\"><div class=\"vce-text-block\"><div class=\"vce-text-block-wrapper vce\" id=\"el-0a428ded\" data-vce-do-apply=\"all el-0a428ded\"><p>Now, let's proceed to write tests for the various methods in the main file (sum, diff, and product). Jest tests follow a behavior-driven development (BDD) style, utilizing a primary \"describe\" block for each test suite, which can contain multiple \"test\" blocks. It is worth noting that tests can have nested \"describe\" blocks as well.<\/p><p>For example, let's write a test that verifies the addition of two numbers and validates the expected result. We will provide the numbers 1 and 2, expecting the output to be 3.<\/p><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><div class=\"vce-row-container\" data-vce-boxed-width=\"true\"><div class=\"vce-row vce-row--col-gap-30 vce-row-equal-height vce-row-content--top\" id=\"el-c5c2306a\" data-vce-do-apply=\"all el-c5c2306a\"><div class=\"vce-row-content\" data-vce-element-content=\"true\"><div class=\"vce-col vce-col--md-auto vce-col--xs-1 vce-col--xs-last vce-col--xs-first vce-col--sm-last vce-col--sm-first vce-col--md-last vce-col--lg-last vce-col--xl-last vce-col--md-first vce-col--lg-first vce-col--xl-first\" id=\"el-8a1107c4\"><div class=\"vce-col-inner\" data-vce-do-apply=\"border margin background  el-8a1107c4\"><div class=\"vce-col-content\" data-vce-element-content=\"true\" data-vce-do-apply=\"padding el-8a1107c4\"><div class=\"vce-widgets-container\"><div class=\"vce vce-widgets-wrapper\" id=\"el-c9a375b2\" data-vce-do-apply=\"all el-c9a375b2\">\t\t\t<div class=\"textwidget\"><pre class=\"brush: css; html-script: true; light: true; title: ; notranslate\" title=\"\"> \ndescribe(&quot;Calculator tests&quot;, () =&gt; {\n test(&#039;adding 1 + 2 should return 3&#039;, () =&gt; {\n   expect(mathOperations.sum(1, 2)).toBe(3);\n });\n})\n<\/pre>\n<\/div>\n\t\t<\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><div class=\"vce-row-container\" data-vce-boxed-width=\"true\"><div class=\"vce-row vce-row--col-gap-30 vce-row-equal-height vce-row-content--top\" id=\"el-c18f5db3\" data-vce-do-apply=\"all el-c18f5db3\"><div class=\"vce-row-content\" data-vce-element-content=\"true\"><div class=\"vce-col vce-col--md-auto vce-col--xs-1 vce-col--xs-last vce-col--xs-first vce-col--sm-last vce-col--sm-first vce-col--md-last vce-col--lg-last vce-col--xl-last vce-col--md-first vce-col--lg-first vce-col--xl-first\" id=\"el-1c765744\"><div class=\"vce-col-inner\" data-vce-do-apply=\"border margin background  el-1c765744\"><div class=\"vce-col-content\" data-vce-element-content=\"true\" data-vce-do-apply=\"padding el-1c765744\"><div class=\"vce-text-block\"><div class=\"vce-text-block-wrapper vce\" id=\"el-450a370d\" data-vce-do-apply=\"all el-450a370d\"><p>Regarding the test above, please consider the following points:<\/p><p>a) The \"describe\" block serves as an outer description for the test suite, acting as a container for all the tests written for the calculator in this file.<br>b) Next, we've an individual \"test\" block, representing a single test case.The string inside quotes denotes the test name.<br>c) Observe the code within the \"expect\" block. \"expect\" functions as an assertion. The statement calls the \"sum\" method from the function under test, passing in inputs 1 and 2, and expects the output to be 3.<\/p><p>To enhance readability, we can rewrite the code in a simplified manner:<\/p><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><div class=\"vce-row-container\" data-vce-boxed-width=\"true\"><div class=\"vce-row vce-row--col-gap-30 vce-row-equal-height vce-row-content--top\" id=\"el-2cb726d0\" data-vce-do-apply=\"all el-2cb726d0\"><div class=\"vce-row-content\" data-vce-element-content=\"true\"><div class=\"vce-col vce-col--md-auto vce-col--xs-1 vce-col--xs-last vce-col--xs-first vce-col--sm-last vce-col--sm-first vce-col--md-last vce-col--lg-last vce-col--xl-last vce-col--md-first vce-col--lg-first vce-col--xl-first\" id=\"el-aec97915\"><div class=\"vce-col-inner\" data-vce-do-apply=\"border margin background  el-aec97915\"><div class=\"vce-col-content\" data-vce-element-content=\"true\" data-vce-do-apply=\"padding el-aec97915\"><div class=\"vce-widgets-container\"><div class=\"vce vce-widgets-wrapper\" id=\"el-4933a571\" data-vce-do-apply=\"all el-4933a571\">\t\t\t<div class=\"textwidget\"><pre class=\"brush: css; html-script: true; light: true; title: ; notranslate\" title=\"\"> \ndescribe(&quot;Calculator tests&quot;, () =&gt; {\n test(&#039;adding 1 + 2 should return 3&#039;, () =&gt; {\n   \/\/ arrange and act\n   let result = mathOperations.sum(1, 2);\n   \/\/ assert\n   expect(result).toBe(3);\n });\n});\n<\/pre>\n<\/div>\n\t\t<\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><div class=\"vce-row-container\" data-vce-boxed-width=\"true\"><div class=\"vce-row vce-row--col-gap-30 vce-row-equal-height vce-row-content--top\" id=\"el-cab591fc\" data-vce-do-apply=\"all el-cab591fc\"><div class=\"vce-row-content\" data-vce-element-content=\"true\"><div class=\"vce-col vce-col--md-auto vce-col--xs-1 vce-col--xs-last vce-col--xs-first vce-col--sm-last vce-col--sm-first vce-col--md-last vce-col--lg-last vce-col--xl-last vce-col--md-first vce-col--lg-first vce-col--xl-first\" id=\"el-e84d9ea0\"><div class=\"vce-col-inner\" data-vce-do-apply=\"border margin background  el-e84d9ea0\"><div class=\"vce-col-content\" data-vce-element-content=\"true\" data-vce-do-apply=\"padding el-e84d9ea0\"><div class=\"vce-text-block\"><div class=\"vce-text-block-wrapper vce\" id=\"el-cd072b8a\" data-vce-do-apply=\"all el-cd072b8a\"><p>To run this test, simply execute the command \"npm test\" in the terminal or command prompt at the project location. The output ought to seem as follows:<\/p><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><div class=\"vce-row-container\" data-vce-boxed-width=\"true\"><div class=\"vce-row vce-row--col-gap-30 vce-row-equal-height vce-row-content--top\" id=\"el-60f4ff72\" data-vce-do-apply=\"all el-60f4ff72\"><div class=\"vce-row-content\" data-vce-element-content=\"true\"><div class=\"vce-col vce-col--md-auto vce-col--xs-1 vce-col--xs-last vce-col--xs-first vce-col--sm-last vce-col--sm-first vce-col--md-last vce-col--lg-last vce-col--xl-last vce-col--md-first vce-col--lg-first vce-col--xl-first\" id=\"el-e6e10b2d\"><div class=\"vce-col-inner\" data-vce-do-apply=\"border margin background  el-e6e10b2d\"><div class=\"vce-col-content\" data-vce-element-content=\"true\" data-vce-do-apply=\"padding el-e6e10b2d\"><div class=\"vce-widgets-container\"><div class=\"vce vce-widgets-wrapper\" id=\"el-6423050d\" data-vce-do-apply=\"all el-6423050d\">\t\t\t<div class=\"textwidget\"><pre class=\"brush: css; html-script: true; light: true; title: ; notranslate\" title=\"\"> \n...\nTest Suites: 1 passed, 1 total\nTests:       1 passed, 1 total\nSnapshots:   0 total\n...\n<\/pre>\n<\/div>\n\t\t<\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><div class=\"vce-row-container\" data-vce-boxed-width=\"true\"><div class=\"vce-row vce-row--col-gap-30 vce-row-equal-height vce-row-content--top\" id=\"el-da012009\" data-vce-do-apply=\"all el-da012009\"><div class=\"vce-row-content\" data-vce-element-content=\"true\"><div class=\"vce-col vce-col--md-auto vce-col--xs-1 vce-col--xs-last vce-col--xs-first vce-col--sm-last vce-col--sm-first vce-col--md-last vce-col--lg-last vce-col--xl-last vce-col--md-first vce-col--lg-first vce-col--xl-first\" id=\"el-ce712394\"><div class=\"vce-col-inner\" data-vce-do-apply=\"border margin background  el-ce712394\"><div class=\"vce-col-content\" data-vce-element-content=\"true\" data-vce-do-apply=\"padding el-ce712394\"><div class=\"vce-text-block\"><div class=\"vce-text-block-wrapper vce\" id=\"el-c5720d00\" data-vce-do-apply=\"all el-c5720d00\"><p>By following this approach, you can write effective tests for JavaScript functions using Jest, ensuring the accuracy and reliability of your code.<\/p><p>Here we are expecting a sum of 1 and 2 to return 10 which is incorrect.<\/p><p>Let\u2019s try executing this and see what we get.<\/p><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><div class=\"vce-row-container\" data-vce-boxed-width=\"true\"><div class=\"vce-row vce-row--col-gap-30 vce-row-equal-height vce-row-content--top\" id=\"el-2ce604d2\" data-vce-do-apply=\"all el-2ce604d2\"><div class=\"vce-row-content\" data-vce-element-content=\"true\"><div class=\"vce-col vce-col--md-auto vce-col--xs-1 vce-col--xs-last vce-col--xs-first vce-col--sm-last vce-col--sm-first vce-col--md-last vce-col--lg-last vce-col--xl-last vce-col--md-first vce-col--lg-first vce-col--xl-first\" id=\"el-ddecbc6e\"><div class=\"vce-col-inner\" data-vce-do-apply=\"border margin background  el-ddecbc6e\"><div class=\"vce-col-content\" data-vce-element-content=\"true\" data-vce-do-apply=\"padding el-ddecbc6e\"><div class=\"vce-single-image-container vce-single-image--align-center\"><div class=\"vce vce-single-image-wrapper\" id=\"el-2154f0d1\" data-vce-do-apply=\"all el-2154f0d1\"><figure><div class=\"vce-single-image-inner vce-single-image--absolute\" style=\"padding-bottom: 100%; width: 1024px;\"><img loading=\"lazy\" decoding=\"async\" class=\"vce-single-image vcv-lozad\" data-src=\"https:\/\/www.bridge-global.com\/blog\/wp-content\/uploads\/2023\/06\/code-1-jest.jpg\" width=\"1024\" height=\"1024\" src=\"\" data-img-src=\"https:\/\/www.bridge-global.com\/blog\/wp-content\/uploads\/2023\/06\/code-1-jest.jpg\" alt=\"jest code 1\" title=\"code 1 -jest\" \/><noscript>\n        <img loading=\"lazy\" decoding=\"async\" class=\"vce-single-image\" src=\"https:\/\/www.bridge-global.com\/blog\/wp-content\/uploads\/2023\/06\/code-1-jest.jpg\" width=\"1024\" height=\"1024\" alt=\"jest code 1\" title=\"code 1 -jest\" \/>\n      <\/noscript><\/div><figcaption hidden=\"\"><\/figcaption><\/figure><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><div class=\"vce-row-container\" data-vce-boxed-width=\"true\"><div class=\"vce-row vce-row--col-gap-30 vce-row-equal-height vce-row-content--top\" id=\"el-d420e60d\" data-vce-do-apply=\"all el-d420e60d\"><div class=\"vce-row-content\" data-vce-element-content=\"true\"><div class=\"vce-col vce-col--md-auto vce-col--xs-1 vce-col--xs-last vce-col--xs-first vce-col--sm-last vce-col--sm-first vce-col--md-last vce-col--lg-last vce-col--xl-last vce-col--md-first vce-col--lg-first vce-col--xl-first\" id=\"el-70bc88a7\"><div class=\"vce-col-inner\" data-vce-do-apply=\"border margin background  el-70bc88a7\"><div class=\"vce-col-content\" data-vce-element-content=\"true\" data-vce-do-apply=\"padding el-70bc88a7\"><div class=\"vce-text-block\"><div class=\"vce-text-block-wrapper vce\" id=\"el-0daa95b6\" data-vce-do-apply=\"all el-0daa95b6\"><p>You can see that detailed output when a test is failed i.e. what was actually returned and what was expected and which line caused the error in the function under test etc.<br>b) Let\u2019s write more tests for the other functions i.e difference and product.<\/p><p>The test file with all the tests will look as shown below.<\/p><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><div class=\"vce-row-container\" data-vce-boxed-width=\"true\"><div class=\"vce-row vce-row--col-gap-30 vce-row-equal-height vce-row-content--top\" id=\"el-30b95952\" data-vce-do-apply=\"all el-30b95952\"><div class=\"vce-row-content\" data-vce-element-content=\"true\"><div class=\"vce-col vce-col--md-auto vce-col--xs-1 vce-col--xs-last vce-col--xs-first vce-col--sm-last vce-col--sm-first vce-col--md-last vce-col--lg-last vce-col--xl-last vce-col--md-first vce-col--lg-first vce-col--xl-first\" id=\"el-d624faee\"><div class=\"vce-col-inner\" data-vce-do-apply=\"border margin background  el-d624faee\"><div class=\"vce-col-content\" data-vce-element-content=\"true\" data-vce-do-apply=\"padding el-d624faee\"><div class=\"vce-widgets-container\"><div class=\"vce vce-widgets-wrapper\" id=\"el-02abd98d\" data-vce-do-apply=\"all el-02abd98d\">\t\t\t<div class=\"textwidget\"><pre class=\"brush: css; html-script: true; light: true; title: ; notranslate\" title=\"\"> \nconst mathOperations = require(&#039;.\/calculator&#039;); \ndescribe(&quot;Calculator tests&quot;, () =&gt; {\n test(&#039;adding 1 + 2 should return 3&#039;, () =&gt; {\n   \/\/ arrange and act\n   var result = mathOperations.sum(1,2)\n \n   \/\/ assert\n   expect(result).toBe(3);\n });\n \n test(&quot;subtracting 2 from 10 should return 8&quot;, () =&gt; {\n   \/\/ arrange and act\n   var result = mathOperations.diff(10,2)\n \n   \/\/ assert\n   expect(result).toBe(8);\n });\n \n test(&quot;multiplying 2 and 8 should return 16&quot;, () =&gt; {\n   \/\/ arrange and act\n   var result = mathOperations.product(2,8)\n \n   \/\/ assert\n   expect(result).toBe(16);\n });\n})\n<\/pre>\n<\/div>\n\t\t<\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><div class=\"vce-row-container\" data-vce-boxed-width=\"true\"><div class=\"vce-row vce-row--col-gap-30 vce-row-equal-height vce-row-content--top\" id=\"el-0a591b96\" data-vce-do-apply=\"all el-0a591b96\"><div class=\"vce-row-content\" data-vce-element-content=\"true\"><div class=\"vce-col vce-col--md-auto vce-col--xs-1 vce-col--xs-last vce-col--xs-first vce-col--sm-last vce-col--sm-first vce-col--md-last vce-col--lg-last vce-col--xl-last vce-col--md-first vce-col--lg-first vce-col--xl-first\" id=\"el-8ab82518\"><div class=\"vce-col-inner\" data-vce-do-apply=\"border margin background  el-8ab82518\"><div class=\"vce-col-content\" data-vce-element-content=\"true\" data-vce-do-apply=\"padding el-8ab82518\"><div class=\"vce-text-block\"><div class=\"vce-text-block-wrapper vce\" id=\"el-b27d7a15\" data-vce-do-apply=\"all el-b27d7a15\"><p>When the above tests are executed, the output given below gets generated.<\/p><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><div class=\"vce-row-container\" data-vce-boxed-width=\"true\"><div class=\"vce-row vce-row--col-gap-30 vce-row-equal-height vce-row-content--top\" id=\"el-35cde7be\" data-vce-do-apply=\"all el-35cde7be\"><div class=\"vce-row-content\" data-vce-element-content=\"true\"><div class=\"vce-col vce-col--md-auto vce-col--xs-1 vce-col--xs-last vce-col--xs-first vce-col--sm-last vce-col--sm-first vce-col--md-last vce-col--lg-last vce-col--xl-last vce-col--md-first vce-col--lg-first vce-col--xl-first\" id=\"el-1829bc01\"><div class=\"vce-col-inner\" data-vce-do-apply=\"border margin background  el-1829bc01\"><div class=\"vce-col-content\" data-vce-element-content=\"true\" data-vce-do-apply=\"padding el-1829bc01\"><div class=\"vce-single-image-container vce-single-image--align-center\"><div class=\"vce vce-single-image-wrapper\" id=\"el-a9fa7d0c\" data-vce-do-apply=\"all el-a9fa7d0c\"><figure><div class=\"vce-single-image-inner vce-single-image--absolute\" style=\"padding-bottom: 69.043%; width: 1024px;\"><img loading=\"lazy\" decoding=\"async\" class=\"vce-single-image vcv-lozad\" data-src=\"https:\/\/www.bridge-global.com\/blog\/wp-content\/uploads\/2023\/06\/code-2.jpg\" width=\"1024\" height=\"707\" src=\"\" data-img-src=\"https:\/\/www.bridge-global.com\/blog\/wp-content\/uploads\/2023\/06\/code-2.jpg\" alt=\"jest javascript tool\" title=\"code 2\" \/><noscript>\n        <img loading=\"lazy\" decoding=\"async\" class=\"vce-single-image\" src=\"https:\/\/www.bridge-global.com\/blog\/wp-content\/uploads\/2023\/06\/code-2.jpg\" width=\"1024\" height=\"707\" alt=\"jest javascript tool\" title=\"code 2\" \/>\n      <\/noscript><\/div><figcaption hidden=\"\"><\/figcaption><\/figure><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><div class=\"vce-row-container\" data-vce-boxed-width=\"true\"><div class=\"vce-row vce-row--col-gap-30 vce-row-equal-height vce-row-content--top\" id=\"el-aee6beb2\" data-vce-do-apply=\"all el-aee6beb2\"><div class=\"vce-row-content\" data-vce-element-content=\"true\"><div class=\"vce-col vce-col--md-auto vce-col--xs-1 vce-col--xs-last vce-col--xs-first vce-col--sm-last vce-col--sm-first vce-col--md-last vce-col--lg-last vce-col--xl-last vce-col--md-first vce-col--lg-first vce-col--xl-first\" id=\"el-02b0231f\"><div class=\"vce-col-inner\" data-vce-do-apply=\"border margin background  el-02b0231f\"><div class=\"vce-col-content\" data-vce-element-content=\"true\" data-vce-do-apply=\"padding el-02b0231f\"><div class=\"vce-text-block\"><div class=\"vce-text-block-wrapper vce\" id=\"el-814478e0\" data-vce-do-apply=\"all el-814478e0\"><h2>Jest Hooks - Initialization and Cleanup<\/h2><p>Similar to other xUnit-based unit test frameworks, Jest provides hooks for initialization and cleanup methods. These hooks execute before and after each test within the test suite or before and after the execution of the entire test suite. A total of four hooks are available for use:<\/p><ul><li>beforeEach and afterEach: These hooks run before and after each test in the test suite.<\/li><li>beforeAll and afterAll: These hooks run only once for each test suite. For example, if a test suite consists of 10 tests, these hooks will execute only once for the entire test suite.<\/li><\/ul><p>Now, let's incorporate these hooks into the existing test example for adding two numbers. We will set the inputs in the beforeEach hook for illustration purposes. The test file would include the test hooks as shown below:<\/p><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><div class=\"vce-row-container\" data-vce-boxed-width=\"true\"><div class=\"vce-row vce-row--col-gap-30 vce-row-equal-height vce-row-content--top\" id=\"el-6c36c27e\" data-vce-do-apply=\"all el-6c36c27e\"><div class=\"vce-row-content\" data-vce-element-content=\"true\"><div class=\"vce-col vce-col--md-auto vce-col--xs-1 vce-col--xs-last vce-col--xs-first vce-col--sm-last vce-col--sm-first vce-col--md-last vce-col--lg-last vce-col--xl-last vce-col--md-first vce-col--lg-first vce-col--xl-first\" id=\"el-1c155efd\"><div class=\"vce-col-inner\" data-vce-do-apply=\"border margin background  el-1c155efd\"><div class=\"vce-col-content\" data-vce-element-content=\"true\" data-vce-do-apply=\"padding el-1c155efd\"><div class=\"vce-widgets-container\"><div class=\"vce vce-widgets-wrapper\" id=\"el-0175d281\" data-vce-do-apply=\"all el-0175d281\">\t\t\t<div class=\"textwidget\"><pre class=\"brush: css; html-script: true; light: true; title: ; notranslate\" title=\"\"> \ndescribe(&quot;Calculator tests&quot;, () =&gt; {\n  var input1 = 0\n var input2 = 0\n \n beforeAll(() =&gt; {\n   console.log(&quot;beforeAll called&quot;);\n });\n \n afterAll(() =&gt; {\n   console.log(&quot;afterAll called&quot;);\n });\n  beforeEach(() =&gt; {\n   console.log(&quot;beforeEach called&quot;);\n   input1 = 1;\n   input2 = 2;\n });\n  afterEach(() =&gt; {\n   console.log(&quot;afterEach called&quot;);\n });\n \n test(&#039;adding 1 + 2 should return 3&#039;, () =&gt; {\n   \/\/ arrange and act\n   var result = mathOperations.sum(input1,input2)\n \n   \/\/ assert\n   expect(result).toBe(3);\n });\n})\n<\/pre>\n<\/div>\n\t\t<\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><div class=\"vce-row-container\" data-vce-boxed-width=\"true\"><div class=\"vce-row vce-row--col-gap-30 vce-row-equal-height vce-row-content--top\" id=\"el-c26b2a8a\" data-vce-do-apply=\"all el-c26b2a8a\"><div class=\"vce-row-content\" data-vce-element-content=\"true\"><div class=\"vce-col vce-col--md-auto vce-col--xs-1 vce-col--xs-last vce-col--xs-first vce-col--sm-last vce-col--sm-first vce-col--md-last vce-col--lg-last vce-col--xl-last vce-col--md-first vce-col--lg-first vce-col--xl-first\" id=\"el-79c8b5f5\"><div class=\"vce-col-inner\" data-vce-do-apply=\"border margin background  el-79c8b5f5\"><div class=\"vce-col-content\" data-vce-element-content=\"true\" data-vce-do-apply=\"padding el-79c8b5f5\"><div class=\"vce-text-block\"><div class=\"vce-text-block-wrapper vce\" id=\"el-2c0c2483\" data-vce-do-apply=\"all el-2c0c2483\"><h2>Conclusion<\/h2><p>Performing unit testing is an essential component of software development projects, and it holds particular significance when engaging with a novel framework. Jest, an influential and user-friendly testing framework designed for JavaScript developers, offers a wide range of capabilities that make it an excellent option for testing JavaScript code. Notable features encompass snapshot testing, mocking, and code coverage. If you haven't yet incorporated Jest into your development workflow, it is certainly worthwhile to explore its capabilities!<\/p><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div>\n<!-- AddThis Advanced Settings generic via filter on the_content --><!-- AddThis Share Buttons generic via filter on the_content -->","protected":false},"excerpt":{"rendered":"<p>Know all about Jest, a JavaScript testing framework that helps developers write automated tests for their JavaScript code. <!-- AddThis Advanced Settings generic via filter on get_the_excerpt --><!-- AddThis Share Buttons generic via filter on get_the_excerpt --><\/p>\n","protected":false},"author":204,"featured_media":52462,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[426],"tags":[663,664],"class_list":["post-52427","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-programming","tag-jest","tag-javascript"],"featured_image_src":"https:\/\/www.bridge-global.com\/blog\/wp-content\/uploads\/2023\/06\/overview-of-jest.jpg","author_info":{"display_name":"Rajitha R","author_link":"https:\/\/www.bridge-global.com\/blog\/author\/rajitha\/"},"_links":{"self":[{"href":"https:\/\/www.bridge-global.com\/blog\/wp-json\/wp\/v2\/posts\/52427","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.bridge-global.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.bridge-global.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.bridge-global.com\/blog\/wp-json\/wp\/v2\/users\/204"}],"replies":[{"embeddable":true,"href":"https:\/\/www.bridge-global.com\/blog\/wp-json\/wp\/v2\/comments?post=52427"}],"version-history":[{"count":36,"href":"https:\/\/www.bridge-global.com\/blog\/wp-json\/wp\/v2\/posts\/52427\/revisions"}],"predecessor-version":[{"id":52466,"href":"https:\/\/www.bridge-global.com\/blog\/wp-json\/wp\/v2\/posts\/52427\/revisions\/52466"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.bridge-global.com\/blog\/wp-json\/wp\/v2\/media\/52462"}],"wp:attachment":[{"href":"https:\/\/www.bridge-global.com\/blog\/wp-json\/wp\/v2\/media?parent=52427"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.bridge-global.com\/blog\/wp-json\/wp\/v2\/categories?post=52427"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.bridge-global.com\/blog\/wp-json\/wp\/v2\/tags?post=52427"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}