In this article i will explain you about testing using jest and puppeteer which you can either do in your nodejs application
\nKinds of testing
\nUnit Test
\nIntegration Test
\nEnd-to-End Testing
\nWe will be looking on to the above testing with an example step by step using jest and puppeteer in this article
\nTesting tools we needed for testing
\nTest Runner: Execute your tests, summarize results eg Mocha, Jest
\nAssetion Library: Define testing logic, conditions eg Chai, Jest
\nHeadless Browser: Simulates browser interaction, automated testing eg Puppeteer we will be using automated testing for end to end testing
\nWe will be setting up a node.js project and we will be adding index.html file and app.js file and styles.css and util.js to our root path
\nThis command will help you in initializing your nodejs project
\nnpm init\nconst { checkAndGenerate, createElement } = require(\"./util\");\n\nconst initApp = () => {\n // Initializes the app, registers the button click listener\n const newUserButton = document.querySelector(\"#btnAddUser\");\n newUserButton.addEventListener(\"click\", addUser);\n};\n\nconst addUser = () => {\n // Fetches the user input, creates a new HTML element based on it\n // and appends the element to the DOM\n const newUserNameInput = document.querySelector(\"input#name\");\n const newUserAgeInput = document.querySelector(\"input#age\");\n\n const outputText = checkAndGenerate(\n newUserNameInput.value,\n newUserAgeInput.value\n );\n\n if (!outputText) {\n return;\n }\n\n const userList = document.querySelector(\".user-list\");\n\n const element = createElement(\"li\", outputText, \"user-item\");\n userList.appendChild(element);\n};\n\n// Start the app!\ninitApp();\nconst generateText = (name, age) => {\n // Returns output text\n return `${name} (${age} years old)`;\n};\n\nexports.createElement = (type, text, className) => {\n // Creates a new HTML element and returns it\n const newElement = document.createElement(type);\n newElement.classList.add(className);\n newElement.textContent = text;\n return newElement;\n};\n\nconst validateInput = (text, notEmpty, isNumber) => {\n // Validate user input with two pre-defined rules\n if (!text) {\n return false;\n }\n if (notEmpty && text.trim().length === 0) {\n return false;\n }\n if (isNumber && +text === NaN) {\n return false;\n }\n return true;\n};\n\nexports.checkAndGenerate = (name, age) => {\n if (!validateInput(name, true, false) || !validateInput(age, false, true)) {\n return false;\n }\n return generateText(name, age);\n};\n\nexports.generateText = generateText;\nexports.validateInput = validateInput;\nbody {\n font-family: sans-serif;\n}\n\n.control-panel {\n width: 25rem;\n}\n\n.input-container {\n margin: 1rem;\n}\n\n.input-container label,\n.input-container input {\n display: block;\n width: 100%;\n}\n\n.input-container input {\n font: inherit;\n}\n\n.button {\n font: inherit;\n background: #521751;\n color: white;\n border: 1px solid #521751;\n padding: 0.5rem 1rem;\n border-radius: 3px;\n margin: 0 1rem;\n}\n\n.user-list {\n display: flex;\n flex-direction: column;\n list-style: none;\n margin: 1rem;\n padding: 0;\n}\n\n.user-item {\n margin-bottom: 1rem;\n padding: 1rem;\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26);\n width: 20rem;\n}\nAdd below code to your index.html file
\n<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n <meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\" />\n <link rel=\"stylesheet\" href=\"styles.css\" />\n <title>JS Testing</title>\n </head>\n\n <body>\n <section class=\"control-panel\">\n <div class=\"input-container\">\n <label for=\"name\">Name</label>\n <input type=\"text\" id=\"name\" />\n </div>\n <div class=\"input-container\">\n <label for=\"age\">Age</label>\n <input type=\"number\" id=\"age\" />\n </div>\n <button id=\"btnAddUser\" class=\"button\">Add User</button>\n </section>\n <hr />\n <section class=\"user-output\">\n <ul class=\"user-list\"></ul>\n </section>\n <script src=\"dist/main.js\"></script>\n </body>\n</html>\n//run this command where you have created your project\nnpm install --save-dev webpack webpack-cli\n//modify the package.json file and add these script\n\"scripts\": {\n \"start\": \"webpack app.js --mode development --watch\",\n \"test\": \"echo \\\"Error: no test specified\\\" && exit 1\"\n },\nnpm install --save-dev jest\nCreate a separate file same as file which you are testing for example iam gonna test a function inside util.js file then i will create a file with the name util.test.js
\nWe will be testing generatedText function inside util.js file
\nInside util.test.js file update the following code
\nconst { generateText } = require(\"./util\");\ntest(\"should output name and age\", () => {\n const text = generateText(\"Abc\", 29);\n expect(text).toBe(\"Abc (29 years old)\");\n});\nIn above code we are testing generateText function and we have given the name of test to be \"should output name and age\"\nand we are calling the function inside test function and expecting the result to be \"Max (29 years old)\"
\nModify the package.json file and add the script for jest testing
\n//modify the package.json file and add these script\n\"scripts\": {\n \"start\": \"webpack app.js --mode development --watch\",\n \"test\": \"jest --watch\"\n },\nnpm run test\nAdd the below code to your util.test.js file and run command npm run test to test using jest
\nconst { generateText } = require(\"./util\");\ntest(\"should output name and age\", () => {\n const text = generateText(\"Abc\", 29);\n expect(text).toBe(\"Abc (29 years old)\");\n});\n\ntest(\"should generate a valid text output\", () => {\n const text = checkAndGenerate(\"Abc\", 29);\n expect(text).toBe(\"Abc (29 years old)\");\n});\nnpm install --save-dev puppeteer\nOnce done just add another test case inside util.test.js file
\nconst puppeteer = require(\"puppeteer\");\nconst { generateText, checkAndGenerate } = require(\"./util\");\n\ntest(\"should output name and age\", () => {\n const text = generateText(\"Abc\", 29);\n expect(text).toBe(\"Abc (29 years old)\");\n});\n\ntest(\"should generate a valid text output\", () => {\n const text = checkAndGenerate(\"Abc\", 29);\n expect(text).toBe(\"Abc (29 years old)\");\n});\n\ntest(\"should create an element with text and correct class\", async () => {\n const browser = await puppeteer.launch({\n headless: true,\n });\n const page = await browser.newPage();\n await page.goto(\"file path for your index.html file\");\n await page.click(\"input#name\");\n await page.type(\"input#name\", \"Anna\");\n await page.click(\"input#age\");\n await page.type(\"input#age\", \"28\");\n await page.click(\"#btnAddUser\");\n const finalText = await page.$eval(\".user-item\", (el) => el.textContent);\n expect(finalText).toBe(\"Def (28 years old)\");\n}, 10000);\nconst browser = await puppeteer.launch({\n headless: true,\n});\nconst page = await browser.newPage();\nawait page.goto(\"file path for your index.html file\");\nawait page.goto(\"file path for your index.html file\");\nawait page.click(\"input#name\");\nawait page.type(\"input#name\", \"Anna\");\nawait page.click(\"input#age\");\nawait page.type(\"input#age\", \"28\");\nawait page.click(\"#btnAddUser\");\nconst finalText = await page.$eval(\".user-item\", (el) => el.textContent);\nexpect(finalText).toBe(\"Def (28 years old)\");\n