Reputation: 40778
I found out about end-to-end test runners for web applications quite recently. They basically replicate a user scenario from start to finish by literally running a web browser. There are for example NightwatchJS and TetsCafé.
There are also unit test runners like Mocha, Jasmine, AVA, Jest, QUnit. If I understand correctly they allow to test units of code like functions by comparing the returned value with the known result.
If I'm building a web application that involves handling document objects, i.e. appending and removing elements or changing their positions. Can I do this with the above five unit test runners? To me end-to-end tests runners seem to be more costly: I can't afford to run them as often as unit tests because they simply take more time.
So my question is, how can I test functions that interact with the DOM? I've found this page on Jest's wiki that explains how to test JQuery code. But I don't know how to test my own functions (no jQuery involved).
For example, I have a function that appends a new div
to the body
of the document and returns the newly created div
element.
let add = function() {
let div = createElement('div');
div.innerHTML = '<div class="newElement">Hello World</div>';
document.querySelector('body').appendChild(div)
return div
}
How can I test that indeed:
add()
returns an instance of HTMLElement
anddiv
element with the class name newElement
exists in the DOM.Upvotes: 1
Views: 654
Reputation: 9336
Jest uses jsdom
as the default test environment, so the usual browser globals are accessible out of the box.
Please see https://facebook.github.io/jest/docs/en/configuration.html#testenvironment-string
Upvotes: 1
Reputation: 40778
I just found the solution testing some code. I didn't think it would work with Jest out of the box. We can actually access the DOM with document
!
Here are the files:
add.js:
let add = function() {
let div = document.createElement('div');
div.innerHTML = '<div class="newElement">Hello World</div>';
document.querySelector('body').appendChild(div)
return div
}
module.exports = add;
add.test.js:
const add = require('./add');
test('add() returns a HTML element', () => {
expect(add()).toBeInstanceOf(HTMLElement)
})
it('a() creates a div with class name newElement', () => {
add()
let textContent = document.querySelector('.newElement').textContent
expect(textContent).toBe('Hello World')
})
Typing in the command line npm jest
, it returns:
Does somebody know why this works? Is JestJS creating an empty document to test?
Upvotes: 0