Mocha JSDOM: Your Ultimate Guide

Mocha is a popular JavaScript test framework running on Node.js and in the browser, making asynchronous testing simple and fun. Mocha tests run serially, allowing for flexible and accurate reporting, while mapping uncaught exceptions to the correct test cases.

jsdom is a JavaScript implementation of various web standards, notably the WHATWG DOM and HTML Standards, for use with Node.js.

mocha-jsdom combines these tools to simulate the browser environment for Mocha tests.

API Examples

Basic Setup

const jsdom = require('mocha-jsdom');

describe('simple test with mocha-jsdom', function () {
  jsdom();

  it('should have document defined', function () {
    const div = document.createElement('div');
    assert.isDefined(div);
  });
});

Fetching Data

const jsdom = require('mocha-jsdom');
const axios = require('axios');

describe('API test with jsdom and axios', function () {
  jsdom();

  it('should fetch data', async function () {
    const response = await axios.get('https://jsonplaceholder.typicode.com/posts/1');
    assert.equal(response.data.id, 1);
  });
});

Manipulating DOM

const jsdom = require('mocha-jsdom');

describe('DOM manipulation test', function () {
  jsdom();

  it('should change innerHTML', function () {
    document.body.innerHTML = '
';
    const div = document.getElementById('test');
    div.innerHTML = 'Hello World';
    assert.equal(div.innerHTML, 'Hello World');
  });
});

Application Example

Here is a simple ‘to-do’ list example that demonstrates some of the APIs together.

const jsdom = require('mocha-jsdom');

describe('To-Do List', function () {
  jsdom();

  it('should be able to add a new to-do', function () {
    document.body.innerHTML = `
      

        Add
        

      
    `;

    function addTask(task) {
      const listItem = document.createElement('li');
      listItem.textContent = task;
      document.getElementById('list').appendChild(listItem);
    }

    document.getElementById('add').addEventListener('click', function () {
      const task = document.getElementById('task').value;
      addTask(task);
    });

    document.getElementById('task').value = 'Write tests';
    document.getElementById('add').click();

    assert.equal(document.querySelectorAll('li').length, 1);
    assert.equal(document.querySelector('li').textContent, 'Write tests');
  });
});

By using mocha-jsdom, you can write more comprehensive and accurate tests for your frontend JavaScript code, from simple DOM manipulations to complex API interactions.

Start leveraging the powerful combination of Mocha and jsdom in your testing suite today!

Hash: 636eb11099a6c34960c1a8944583b4a491ae06067164eab999efb4885068c63e