Testing DOM Manipulation with jsdom in Jest

Many JavaScript projects involve manipulating the Document Object Model (DOM), particularly when working with front-end frameworks or libraries. To effectively test these DOM manipulations, you need a DOM environment. This challenge focuses on setting up and utilizing jsdom within a Jest testing environment to enable reliable and isolated DOM-dependent tests.

Problem Description

The goal is to configure a Jest testing environment that utilizes jsdom to simulate a browser environment. This will allow you to write tests that interact with DOM elements, simulate user events, and verify the resulting changes, all within the Jest testing framework. You'll need to create a Jest setup file that initializes jsdom and then write a simple test case that demonstrates its usage.

What needs to be achieved:

1. Create a Jest setup file (e.g., setupTests.ts) that configures jsdom as the test environment.
2. Write a Jest test case that creates a simple DOM element (e.g., a <div>), modifies it, and asserts that the modification was successful.
3. Ensure the test case runs correctly within the Jest environment, leveraging jsdom for DOM manipulation.

Key Requirements:

• The setup file must correctly initialize jsdom.
• The test case must be able to create, manipulate, and query DOM elements.
• The test case must use Jest assertions to verify the expected behavior.
• The solution must be written in TypeScript.

Expected Behavior:

The Jest test suite should run without errors, and the test case should pass, indicating that jsdom is correctly configured and functioning within the Jest environment. The test case should demonstrate basic DOM manipulation capabilities.

Edge Cases to Consider:

• Ensure that the jsdom environment is properly isolated for each test case to prevent interference.
• Consider how to handle asynchronous operations within the DOM manipulation process. While this challenge focuses on basic DOM manipulation, be mindful of potential asynchronous behavior in more complex scenarios.

Examples

Example 1:

Input: A Jest test case that creates a <div> element, sets its innerHTML to "Hello, world!", and asserts that the innerHTML is indeed "Hello, world!".
Output: The test case passes, indicating that jsdom is correctly configured and the DOM manipulation was successful.
Explanation: This demonstrates the basic ability to create and modify DOM elements using jsdom within Jest.

Example 2:

Input: A Jest test case that creates a <button> element, adds an event listener for the 'click' event, simulates a click event, and asserts that a specific function was called.
Output: The test case passes, indicating that jsdom can handle event listeners and simulate user events.
Explanation: This demonstrates the ability to simulate user interactions within the jsdom environment.

Constraints

• The solution must be written in TypeScript.
• The setup file should be named setupTests.ts and placed in the src directory (or a directory specified in your Jest configuration).
• The test case should be a simple, self-contained unit test.
• The solution should not rely on external libraries beyond jsdom and Jest.
• The test case should be runnable with a standard Jest configuration.

Notes

• You'll need to install jsdom as a development dependency in your project: npm install --save-dev jsdom.
• The setupTests.ts file is automatically executed by Jest before each test suite.
• Consider using jest.mock if you need to mock any external modules used within your DOM manipulation code.
• Focus on demonstrating the core functionality of jsdom within Jest. Complex DOM interactions are beyond the scope of this challenge.
• Refer to the jsdom and Jest documentation for more detailed information on their respective APIs.