How to Test DOM Manipulation in JavaScript: Simple Guide

To test DOM manipulation in JavaScript, use a testing framework like Jest combined with jsdom to simulate the browser environment. Write tests that perform actions on the DOM and then check if the expected changes happened using assertions on elements.

Syntax

Testing DOM manipulation involves setting up a simulated DOM, performing actions that change the DOM, and then checking the results with assertions.

• document.body.innerHTML: Set initial HTML structure.
• element.querySelector: Select elements to manipulate or check.
• expect(...).toBe(...): Assert expected DOM changes.

javascript

document.body.innerHTML = '<div id="container"></div>';
const container = document.querySelector('#container');
// Perform DOM manipulation
container.textContent = 'Hello';
// Assert the change
expect(container.textContent).toBe('Hello');

Example

This example shows how to test a function that adds a paragraph to a container element in the DOM using Jest and jsdom.

javascript

function addParagraph(text) {
  const container = document.getElementById('container');
  const p = document.createElement('p');
  p.textContent = text;
  container.appendChild(p);
}

describe('addParagraph', () => {
  beforeEach(() => {
    document.body.innerHTML = '<div id="container"></div>';
  });

  test('adds a paragraph with given text', () => {
    addParagraph('Hello World');
    const container = document.getElementById('container');
    expect(container.children.length).toBe(1);
    expect(container.children[0].textContent).toBe('Hello World');
  });
});

Output

PASS  addParagraph adds a paragraph with given text

Common Pitfalls

Common mistakes when testing DOM manipulation include:

• Not resetting the DOM before each test, causing tests to interfere with each other.
• Testing implementation details instead of visible changes.
• Forgetting to simulate the DOM environment (like using jsdom) when running tests outside a browser.

javascript

/* Wrong: Not resetting DOM between tests */
document.body.innerHTML = '<div id="container"></div>';
addParagraph('First');
addParagraph('Second');
expect(document.getElementById('container').children.length).toBe(2); // Passes but can cause issues

/* Right: Reset DOM in beforeEach */
beforeEach(() => {
  document.body.innerHTML = '<div id="container"></div>';
});

Quick Reference

Tips for testing DOM manipulation:

• Use jsdom with Jest to simulate the DOM.
• Reset the DOM before each test with beforeEach.
• Use document.body.innerHTML to set up initial HTML.
• Use querySelector or getElementById to select elements.
• Assert changes with expect and check text, attributes, or children.

Key Takeaways

Use Jest with jsdom to create a test environment for DOM manipulation.

Always reset the DOM before each test to avoid interference.

Test visible changes in the DOM, not internal implementation details.

Use selectors like getElementById or querySelector to find elements.

Assert expected DOM changes with clear and simple assertions.