unit.js

const tape = require('tape');
const test = require('tape-css')(tape);
const h = require('hyperscript');
const getStyle = require('computed-style');

const $ = selector => document.querySelector(selector);

const styles = require('./my-component.css');
const dom = () => (
  h('div.MyComponent',
    h('div.MyComponent-header')
  )
);

test('MyComponent test', {dom: dom(), styles}, t => {
  t.test('MyComponent', t => {
    const el = $('.MyComponent');

    t.equal(
      getStyle(el, 'margin'),
      '0px',
      'should not have a margin'
    );

    t.equal(
      getStyle(el, 'background-color'),
      'rgb(255, 255, 255)',
      'should have a white background'
    );

    t.end();
  });

  t.test('MyComponent--important', t => {
    const el = $('.MyComponent');
    el.classList.add('MyComponent--important');

    t.equal(
      getStyle(el, 'border-color'),
      'rgb(255, 0, 0)',
      'should add a red border'
    );

    t.end();
  });

  t.test('MyComponent-header', t => {
    const el = $('.MyComponent-header');

    t.equal(
      getStyle(el, 'font-size'),
      '24px',
      'should have a font size'
    );

    t.equal(
      getStyle(el, 'font-weight'),
      'bold',
      'should be bold'
    );

    t.end();
  });
});