{"library":"mocha-test-container-support","title":"Mocha Test Container Support","description":"mocha-test-container-support is a Mocha plugin designed to provide visual debugging support for test cases by injecting a unique `div` container into the DOM for each test. This allows developers to visually inspect the DOM changes and rendering produced by their test code directly in the browser during test-driven development (TDD). The plugin is currently at version 0.2.0, with its last update several years ago, indicating it is no longer actively maintained. A key differentiator is its focus on visual feedback, although it explicitly states it offers no 'real' encapsulation, meaning CSS, JavaScript, and DOM changes can leak between tests, potentially causing unintended side effects. It differs from isolated testing environments (like `<iframe>` or Shadow DOM) by rendering content directly into the main DOM. Its release cadence was slow, and it appears to be abandoned.","language":"javascript","status":"abandoned","last_verified":"Sun Apr 19","install":{"commands":["npm install mocha-test-container-support"],"cli":null},"imports":["const TestContainer = require('mocha-test-container-support');"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"const assert = require('assert');\nconst TestContainer = require('mocha-test-container-support');\n\ndescribe('My Feature', function() {\n  let testContentContainer;\n\n  beforeEach(function() {\n    // Get a new container for each test\n    testContentContainer = TestContainer.get(this);\n    // Clear previous content if any, though TestContainer.get typically returns a fresh one\n    testContentContainer.innerHTML = ''; \n  });\n\n  it('should append a div to the test container', function() {\n    const myDiv = document.createElement('div');\n    myDiv.textContent = 'Hello from test!';\n    testContentContainer.appendChild(myDiv);\n    assert.strictEqual(testContentContainer.querySelector('div').textContent, 'Hello from test!');\n    // You could visually verify this in a browser-based Mocha runner\n  });\n\n  it('should apply a style to the test container', function() {\n    testContentContainer.style.backgroundColor = 'blue';\n    assert.strictEqual(testContentContainer.style.backgroundColor, 'blue');\n    // Caution: styles can leak to other tests if not reset or isolated (which this lib doesn't do fully)\n  });\n\n  // Example of a test where DOM changes could be visually inspected\n  it('should render a list of items', function() {\n    const ul = document.createElement('ul');\n    ['Item 1', 'Item 2'].forEach(text => {\n      const li = document.createElement('li');\n      li.textContent = text;\n      ul.appendChild(li);\n    });\n    testContentContainer.appendChild(ul);\n    assert.strictEqual(testContentContainer.querySelectorAll('li').length, 2);\n  });\n});","lang":"javascript","description":"This quickstart demonstrates how to import and use `mocha-test-container-support` within Mocha's `beforeEach` hook to obtain a dedicated DOM container for each test, allowing for visual inspection and manipulation of test-specific DOM content.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}