jest-environment-jsdom

Simulating browser environment for testing

This feature allows you to simulate browser-like interactions such as clicking a button and then asserting the expected outcome, all within a Node.js environment.

test('simulates a click event', () => {
  document.body.innerHTML = '<button id="button">Click me</button>';
  const button = document.getElementById('button');
  button.addEventListener('click', () => {
    button.innerHTML = 'Clicked';
  });
  button.click();
  expect(button.innerHTML).toBe('Clicked');
});

Testing DOM manipulation

You can test DOM manipulation by creating, modifying, and removing elements, and then asserting that these changes have taken place as expected.

test('adds a new div to the body', () => {
  const div = document.createElement('div');
  div.id = 'new-div';
  document.body.appendChild(div);
  expect(document.getElementById('new-div')).not.toBeNull();
});

Mocking global variables

The package allows you to mock global variables such as localStorage, which is useful for testing code that interacts with browser APIs that are not available in Node.js.

test('mocks a global variable', () => {
  global.localStorage = {
    getItem: jest.fn().mockReturnValue('mockValue')
  };
  expect(global.localStorage.getItem('key')).toBe('mockValue');
});