Automated Javascript testing with Mocha.js
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');
tests.js file and then call different methods of Mocha. Consider the code snippet shown below.
mocha.checkLeaks(); mocha.run();
index.js code shown below.
function addNumbers(a, b) {
return a + b;
}
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)
})
})
Chai and Expect packages through the index.html file. < 中存在的 CDN 链接提供给我们的。 /b>
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 result
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;
}
Copy after loginCopy after login
test.jslet multiplyNumber = (a, b) => {
return a * b;
}
Now, 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)
})
})
Run 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 result
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!
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
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
Replace String Characters in JavaScript
Mar 11, 2025 am 12:07 AM
Detailed 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
8 Stunning jQuery Page Layout Plugins
Mar 06, 2025 am 12:48 AM
Leverage 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 Applications
Mar 09, 2025 am 12:11 AM
So 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
10 Mobile Cheat Sheets for Mobile Development
Mar 05, 2025 am 12:43 AM
This 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 Viewer
Mar 05, 2025 am 12:54 AM
jQuery 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
10 jQuery Fun and Games Plugins
Mar 08, 2025 am 12:42 AM
10 fun jQuery game plugins to make your website more attractive and enhance user stickiness! While Flash is still the best software for developing casual web games, jQuery can also create surprising effects, and while not comparable to pure action Flash games, in some cases you can also have unexpected fun in your browser. jQuery tic toe game The "Hello world" of game programming now has a jQuery version. Source code jQuery Crazy Word Composition Game This is a fill-in-the-blank game, and it can produce some weird results due to not knowing the context of the word. Source code jQuery mine sweeping game
How do I create and publish my own JavaScript libraries?
Mar 18, 2025 pm 03:12 PM
Article discusses creating, publishing, and maintaining JavaScript libraries, focusing on planning, development, testing, documentation, and promotion strategies.
jQuery Parallax Tutorial - Animated Header Background
Mar 08, 2025 am 12:39 AM
This tutorial demonstrates how to create a captivating parallax background effect using jQuery. We'll build a header banner with layered images that create a stunning visual depth. The updated plugin works with jQuery 1.6.4 and later. Download the
