I'm using mocha to test my JavaScript code. The code involves html and css and implements a chat app. As far as I saw, Mocha can test JavaScript functions by matching the expected value to the function's return value.
But what if I want to test functions that don't return a value? Functions that mainly deal with DOM elements. (Like appending an image for example ).
How exactly can I mock DOM elements in mocha and then test if the function succeeds in generating the appropriate DOM elements?
I had looked around and found it was possible with selenium webdriver and jsdom. Is it possible to do this test with mocha alone and no other additional interfaces?
I'm using mocha to test my JavaScript code. The code involves html and css and implements a chat app. As far as I saw, Mocha can test JavaScript functions by matching the expected value to the function's return value.
But what if I want to test functions that don't return a value? Functions that mainly deal with DOM elements. (Like appending an image for example ).
How exactly can I mock DOM elements in mocha and then test if the function succeeds in generating the appropriate DOM elements?
I had looked around and found it was possible with selenium webdriver and jsdom. Is it possible to do this test with mocha alone and no other additional interfaces?
Share Improve this question asked Jul 4, 2017 at 13:00 ShakedShaked 1851 silver badge9 bronze badges 6- 3 JSDom is the right tool. Why would you prefer to avoid it? – joews Commented Jul 4, 2017 at 13:03
- Some example tests using JSDom (using Jest, which has a similar API): github./ripjar/material-datetime-picker/blob/master/lib/js/… – joews Commented Jul 4, 2017 at 13:04
- I was told to use mocha alone...But thanks anyway – Shaked Commented Jul 4, 2017 at 13:05
- Can you use an assertion library (e.g. chai) as well? mocha doesn't give you a way to make assertions about your code. – joews Commented Jul 4, 2017 at 13:19
- I don't think I can.. Just mocha. Are you saying it's impossible? – Shaked Commented Jul 4, 2017 at 13:23
3 Answers
Reset to default 5JSDOM is convenient because it allows you to test against a "real" DOM implementation without the overhead of running in a web browser.
If you can run your unit tests inside a browser you can assert against the DOM in the same way:
describe("the super special button", () => {
it("adds an image", (done) => {
const button = document.querySelector(".js-super-special");
button.click();
// give the browser a chance to update the DOM
setTimeout(() => {
const image = document.querySelector(".js-image")
// using assertion library, like chai
expect(image).to.not.beNull();
// or using a port of Node's `assert` from a bundler like browserify:
assert(image != null);
done();
})
})
});
You have to use fake DOM APIs in nodejs context, and make them global on before hooks of mocha.
beforeEach(() => {
const dom = new JSDOM(
`<html>
<body>
</body>
</html>`,
{ url: 'http://localhost' },
);
global.window = dom.window;
global.document = dom.window.document;
});
Read more here: https://seesparkbox./foundry/improve_unit_testing_with_mocha_chai_jsdom
you can use jsdom-global package alternative that also works outside of Mocha. mocha-jsdom still works, but jsdom-global is better supported.
npm install --save-dev --save-exact jsdom jsdom-global
modify npm test script to be:
"test": "mocha -r jsdom-global/register"
test example: app.test.js
import {JSDOM} from 'jsdom'; // can also use mon js
describe('DOM', () => {
it('should log selector list', () => {
const dom = new JSDOM(
`<html>
<body>
<div class="card">1</div>
<div class="card">2</div>
<div class="card">3</div>
</body>
</html>`,
{url: 'http://localhost'},
);
});
global.document = dom.window.document;
console.log(document.querySelectorAll('.card'));
});