QUnit + React, Capybara style.

test.js

var SoundMessage = require('components/formatters/sound'),
    React = require('react');

function render(Component, props, callback) {
  var element = React.createElement(Component, props),
      root = document.createElement('div');

  var component = React.render(element, root, function() {
    setTimeout(function() {
      callback(root.childNodes[0], component);
    });
  });
}

QUnit.module('Components.Formatter.Sound');

QUnit.test('renders the sound message element', function(assert) {
  var message = { userId: 12345, body: 'wups' };

  var done = assert.async();
  render(SoundMessage, { message: message }, function(node) {
    assert.hasSelector(node, '.chat-message-text-container');
    assert.hasSelector(node, 'audio');
    assert.hasSelector(node, '.sound-button.play');
    done();
  });
});

QUnit.test('changes the button class when the audio is playing', function(assert) {
  var message = { userId: 12345, body: 'LOLNOPE' };

  var done = assert.async();
  render(SoundMessage, { message: message }, function(node, component) {
    assert.hasSelector(node, '.sound-button.play');
    component.setState({ isPlaying: true });
    assert.hasSelector(node, '.sound-button.stop');
    done();
  });
});

Qunit.assert.hasSelector = function(node, selector) {
  var el = $('<div>' + node.outerHTML + '</div>'),
    ok = el.has(selector);

  this.push(ok, el.html(), selector, "expected to have selector '" +  selector +"'.");
};

Qunit.assert.hasText = function(node, selector, text) {
  this.hasSelector(node, selector);
  var el = $('<div>' + node.outerHTML + '</div>').find(selector);

  if (el.length) {
    var source = el.text(),
        ok = el.text().includes(text);
    this.push(ok, source, text, "expected '" +  selector + "' to have contain '" + text + "', but contains '" + source + "' instead.");
  }
};