JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/qunit/qunit-2.3.2.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/qunit/qunit-2.3.2.css">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<div id="qunit"></div>
<div id="qunit-fixture"></div>

CSS

.modal {
  display: none;
}

.active {
  display: block;
}

JavaScript

QUnit.test('the modal is NOT open by default', (assert) => {
  // Arrange (compile)
  // Act (to open by default when compiled)
  const compiledModal = compileComponent('<modal></modal>');

  // Assert (that is open)
  const actual = compiledModal.find('.modal').is(':visible');
  const expected = false;
  assert.strictEqual(actual, expected, 'Modal should be visible in the screen');
});

QUnit.test('a modal can close', (assert) => {
  // Arrange (compile)
  const compiledModal = compileComponent('<modal></modal>');

  // Act (to close the modal)
  // Assert (that is open)
  let actual = compiledModal.find('.modal').is(':visible');
  let expected = true;
  assert.strictEqual(actual, expected, 'Modal should be open before closing');
  $('.modal').find('.close').click();

  // Assert (that is closed)
  actual = compiledModal.find('.modal').is(':visible');
  expected = false;
  assert.strictEqual(
    actual,
    expected,
    'Modal should NOT be visible in the screen'
  );
});

function compileComponent(template) {
  const component = $(template);
  component.html(`
    <div class="modal">
      <h1>My Modal</h1>
    </div>
  `);
  return component.appendTo('#qunit-fixture');
}