As we all know, code is prone to errors, and sometimes even if we know that a specific workflow will work fine in some cases, we are more likely to forget about others.
In simple terms, it can be said that when we test the code manually, we may miss something. For example, let's say we have two functions, func1() and func2(), and we know that func1() works for the following cases we're already testing is defined, but we find that func2() does not work. Then we fixed func2() but then forgot to check if func1() applied to the entire process after we made the change in func2(). This process can lead to errors, and this will typically happen several times.
Now, we know that running tests manually is not a very ideal option, so it is recommended to run separately written tests in addition to the code we may have written. This is the so-called automated testing.
In this tutorial, we will explore how to use Mocha for automated testing in JavaScript.
The first step is to be able to use Mocha simultaneously in our code. To do this, we can take advantage of the CDN link that mocha.js provides us. In this tutorial we will also use Chai.js and Expect.js which work well with when we want to check the exact behavior of our possible different functions Used with Mocha. Written.
Here are all the CDNs you need to import in your index.html file.
Expect.js
https://cdn.rawgit.com/Automattic/expect.js/0.3.1/index.js
Chai.js
https://cdn.rawgit.com/chaijs/chai/3.5.0/chai.js
Mocha.js
https://cdn.rawgit.com/mochajs/mocha/2.2.5/mocha.js
The next step is to create three files in the simple project directory of your favorite IDE or code editor.
- index.html
- index.js
- test.js
You can also use the command shown below.
touch index.html index.js tests.js
Note - The touch command may not run on your local machine, in which case please use the vi command instead.
index.html
Now that we have created all the files, it's time to write the code. Open the index.html file and paste the following lines.
Example
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Automated Testing With Mocha</title>
<link href="https://cdn.rawgit.com/mochajs/mocha/2.2.5/mocha.css" rel="stylesheet" />
</head>
<body>
<div id="mocha"></div>
<script src="https://cdn.rawgit.com/Automattic/expect.js/0.3.1/index.js"></script>
<script src="https://cdn.rawgit.com/chaijs/chai/3.5.0/chai.js"></script>
<script src="https://cdn.rawgit.com/mochajs/mocha/2.2.5/mocha.js"></script>
<script src="index.js"></script>
<script>
const mocha = window.mocha;
mocha.setup('bdd');
</script>
<script src="tests.js"></script>
<script>
mocha.checkLeaks();
mocha.run();
</script>
</body>
</html>
illustrate
In the above HTML code, I imported all the dependencies via CDN such as Mocha, Chai and Expect.
Then I imported two different js files in synchronous order, namely index.js and tests.js, which means, first# The ##index.js file runs, followed by a script where I set window.mocha() and bdd.
Consider the code snippet shown below.
const mocha = window.mocha;
mocha.setup('bdd');
After the above code, I call the tests.js file and then call different methods of Mocha. Consider the code snippet shown below.
mocha.checkLeaks(); mocha.run();Now it's time for us to write some functions to test them in an automated way using Mocha. Consider the
index.js code shown below.
function addNumbers(a, b) {
return a + b;
}
The function above is a very simple function where we take two parameters and then simply return the sum of those two numbers in the response. test.js
Now comes the interesting part, we will test whether the above functionality works as expected with the help of automated tests. Consider the tests.js code shown below.
const chai = window.chai
const expect = chai.expect
describe('addNumbers', () => {
it('should be able to add two numbers and give proper result', () => {
expect(addNumbers(1, 3)).to.deep.equal(4)
expect(addNumbers(1, 5)).to.deep.equal(6)
expect(addNumbers(-9, -10)).to.deep.equal(-19)
})
})
In the above code, I imported the Chai and Expect packages through the index.html file.
Additionally, we are using thedescribe function where the first parameter we pass is a string of our choice. Next, we create an anonymous function in which we call the it() function, which in turn takes a string as the first parameter and an anonymous arrow function as the second parameter.
We are using theexpect function where we call the actual function we want to test as a parameter and then check for equality using the deep.equal() method.
OutputAfter running the HTML code and opening the code in a browser, everything should work as expected. You should see text printed in your browser, somewhat similar to what is shown below.
>addNumbers should be able to add two numbers and give proper resultLet’s add a second function
In the example above, we tested a simple JavaScript function called
addNumbers. Now, let's try adding another function, but this time, we'll use an arrow function. Consider the code shown below.
index.js
let multiplyNumber = (a, b) => {
return a * b;
}
test.jsNow, let’s write an automated test for the above function in the
tests.js file. Consider the code snippet shown below.
describe('multiplyNumber', () => {
it('should be able to multiply two numbers and give proper result',() => {
expect(multiplyNumber(1, 3)).to.deep.equal(3)
expect(multiplyNumber(1, 5)).to.deep.equal(5)
expect(multiplyNumber(-9, -10)).to.deep.equal(90)
})
})
OutputRun the HTML code and this time you will get the names of the two functions in the browser.
addNumbers should be able to add two numbers and give proper result‣ multiplyNumber should be able to multiply two numbers and give proper resultWhat if the function does not return the expected output?
In the two functions for which we wrote automated tests, we actually expected to get the correct values. What if we change the core logic of the function to return an error value?
考虑 index.js 文件中存在一个名为 multiplyNumber 的函数。让我们对函数进行更改，以便它不会给出我们预期的输出。
乘数
let multiplyNumber = (a, b) => {
return a * b;
}
输出
现在，如果我们在浏览器中运行 HTML 代码，我们将在浏览器中得到以下输出。
multiplyNumber should be able to multiply two numbers and give proper result‣ AssertionError: expected 0.3333333333333333 to deeply equal 3
使用多个描述函数进行自动化测试
在上面的两个示例中，我们使用了单个 describe 函数和简单函数。现在假设我们想要使用一个函数来计算数字的幂。
考虑下面所示的index.js代码
function power(x, n) {
let res = 1;
for (let i = 0; i < n; i++) {
res *= x;
}
return res;
}
在上面的函数中，我们采用两个参数，然后将一个数字的幂提高到 n 倍。
测试.js
现在让我们为此函数编写一个自动化测试。
describe("power", function () {
describe("raises x to power 2", function () {
function checkPower(x) {
let expected = x * x;
it(`${x} in the power 2 is ${expected}`, function () {
expect(power(x, 2)).to.deep.equal(expected);
});
}
for (let x = 1; x <= 5; x++) {
checkPower(x);
}
});
});
我们可以看到，在自动化测试函数中，我们使用了嵌套的describe函数。在这里，我们检查在 index.js 中编写的 power() 函数是否按预期工作。
输出
power raises x to power 2 1 in the power 2 is 1‣ 2 in the power 2 is 4‣ 3 in the power 2 is 9‣ 4 in the power 2 is 16‣ 5 in the power 2 is 25
结论
在本教程中，我们通过示例解释了如何使用 Mocha.js 与 Chai.js 和 Expect.js 在 JavaScript 中执行自动化测试。
The above is the detailed content of Automated Javascript testing with Mocha.js. For more information, please follow other related articles on the PHP Chinese website!
Replace String Characters in JavaScriptMar 11, 2025 am 12:07 AMDetailed explanation of JavaScript string replacement method and FAQ This article will explore two ways to replace string characters in JavaScript: internal JavaScript code and internal HTML for web pages. Replace string inside JavaScript code The most direct way is to use the replace() method: str = str.replace("find","replace"); This method replaces only the first match. To replace all matches, use a regular expression and add the global flag g: str = str.replace(/fi
Custom Google Search API Setup TutorialMar 04, 2025 am 01:06 AMThis tutorial shows you how to integrate a custom Google Search API into your blog or website, offering a more refined search experience than standard WordPress theme search functions. It's surprisingly easy! You'll be able to restrict searches to y
8 Stunning jQuery Page Layout PluginsMar 06, 2025 am 12:48 AMLeverage jQuery for Effortless Web Page Layouts: 8 Essential Plugins jQuery simplifies web page layout significantly. This article highlights eight powerful jQuery plugins that streamline the process, particularly useful for manual website creation
Build Your Own AJAX Web ApplicationsMar 09, 2025 am 12:11 AMSo here you are, ready to learn all about this thing called AJAX. But, what exactly is it? The term AJAX refers to a loose grouping of technologies that are used to create dynamic, interactive web content. The term AJAX, originally coined by Jesse J
What is 'this' in JavaScript?Mar 04, 2025 am 01:15 AMCore points This in JavaScript usually refers to an object that "owns" the method, but it depends on how the function is called. When there is no current object, this refers to the global object. In a web browser, it is represented by window. When calling a function, this maintains the global object; but when calling an object constructor or any of its methods, this refers to an instance of the object. You can change the context of this using methods such as call(), apply(), and bind(). These methods call the function using the given this value and parameters. JavaScript is an excellent programming language. A few years ago, this sentence was
10 Mobile Cheat Sheets for Mobile DevelopmentMar 05, 2025 am 12:43 AMThis post compiles helpful cheat sheets, reference guides, quick recipes, and code snippets for Android, Blackberry, and iPhone app development. No developer should be without them! Touch Gesture Reference Guide (PDF) A valuable resource for desig
Improve Your jQuery Knowledge with the Source ViewerMar 05, 2025 am 12:54 AMjQuery is a great JavaScript framework. However, as with any library, sometimes it’s necessary to get under the hood to discover what’s going on. Perhaps it’s because you’re tracing a bug or are just curious about how jQuery achieves a particular UI
How do I create and publish my own JavaScript libraries?Mar 18, 2025 pm 03:12 PMArticle discusses creating, publishing, and maintaining JavaScript libraries, focusing on planning, development, testing, documentation, and promotion strategies.
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
AI Hentai Generator
Generate AI Hentai for free.
Hot Article
Hot Tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
SAP NetWeaver Server Adapter for Eclipse
Integrate Eclipse with SAP NetWeaver application server.
ZendStudio 13.5.1 Mac
Powerful PHP integrated development environment
mPDF
mPDF is a PHP library that can generate PDF files from UTF-8 encoded HTML. The original author, Ian Back, wrote mPDF to output PDF files "on the fly" from his website and handle different languages. It is slower than original scripts like HTML2FPDF and produces larger files when using Unicode fonts, but supports CSS styles etc. and has a lot of enhancements. Supports almost all languages, including RTL (Arabic and Hebrew) and CJK (Chinese, Japanese and Korean). Supports nested block-level elements (such as P, DIV),
SublimeText3 English version
Recommended: Win version, supports code prompts!
