実際のブラウザでVueコンポーネントをテストする：アーキテクチャ、リアクティビティ、QUnit

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Vue 3 Browser Component Tests</title>
  <link rel="stylesheet" href="https://code.jquery.com/qunit/qunit-2.20.0.css">
</head>
<body>
  <div id="qunit"></div>
  <div id="qunit-fixture"></div>

  <!-- Load QUnit, Vue 3, and Bundled Components -->
  <script src="https://code.jquery.com/qunit/qunit-2.20.0.js"></script>
  <script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
  <script src="./dist/components.bundle.js"></script>
  <script src="./tests/components.test.js"></script>
</body>
</html>

// test-helpers.js
function mountVueComponent(Component, props = {}, initialData = {}) {
  const fixture = document.getElementById('qunit-fixture');
  const container = document.createElement('div');
  fixture.appendChild(container);

  const app = Vue.createApp({
    render() {
      return Vue.h(Component, {
        ...props,
        ref: 'componentInstance',
      });
    },
    data() {
      return initialData;
    }
  });

  const vm = app.mount(container);

  return {
    app,
    container,
    vm: vm.$refs.componentInstance,
    // Helper to query elements within this component's DOM
    find: (selector) => container.querySelector(selector),
    findAll: (selector) => Array.from(container.querySelectorAll(selector)),
    // Teardown
    unmount: () => app.unmount(),
  };
}

// ❌ FAILS: DOM has not flushed updates yet
component.count++;
assert.equal(element.textContent, 'Count: 1'); // Fails! Text is still 'Count: 0'

// components.test.js
QUnit.module('CounterComponent Tests', (hooks) => {
  let mounted;

  hooks.afterEach(() => {
    if (mounted) mounted.unmount();
  });

  QUnit.test('increments counter on button click', async (assert) => {
    mounted = mountVueComponent(window.CounterComponent, { initialCount: 5 });
    
    const button = mounted.find('button.increment');
    const display = mounted.find('span.count');

    assert.equal(display.textContent.trim(), '5', 'Initial count renders correctly');

    // Simulate real user click event
    button.dispatchEvent(new MouseEvent('click', { bubbles: true }));

    // Await reactivity batch
    await Vue.nextTick();

    assert.equal(display.textContent.trim(), '6', 'DOM updates after click event');
  });
});

QUnit.module('FeedbackForm Tests', (hooks) => {
  let mounted;

  hooks.afterEach(() => {
    if (mounted) mounted.unmount();
  });

  QUnit.test('submits valid feedback and displays confirmation', async (assert) => {
    mounted = mountVueComponent(window.FeedbackForm);

    const input = mounted.find('input[name="email"]');
    const textarea = mounted.find('textarea[name="message"]');
    const form = mounted.find('form');

    // Populate form fields
    input.value = 'developer@locionic.com';
    input.dispatchEvent(new Event('input', { bubbles: true }));

    textarea.value = 'The browser test runner is incredibly fast!';
    textarea.dispatchEvent(new Event('input', { bubbles: true }));

    await Vue.nextTick();

    // Trigger form submit
    form.dispatchEvent(new Event('submit', { bubbles: true, cancelable: true }));

    // Wait for async submission simulation
    await new Promise((resolve) => setTimeout(resolve, 50));
    await Vue.nextTick();

    const successMessage = mounted.find('.alert-success');
    assert.ok(successMessage, 'Success message appears in the DOM');
    assert.includes(successMessage.textContent, 'Thank you', 'Correct confirmation text rendered');
  });
});