jss button testing https://github.com/cssinjs/react-jss/issues/93

button.js

import React, { PropTypes } from 'react';
import cn from 'classnames';

const Button = ({
  classes,
  children,
  tag: Tag,
  block,
  active,
  disabled,
}) => {
  const isInput = Tag === 'input';
  const isLink = Tag === 'a';
  return (
    <Tag
      className={cn({
        [classes.button]: true,
        [classes.block]: block,
        [classes.active]: active,
        [classes.disabled]: disabled,
      })}
      disabled={ disabled ? true : null }
      aria-pressed={ (isLink && active) ? true : null }
      aria-disabled={ (isLink && disabled) ? true : null }
    >
      { !isInput ? children : null }
    </Tag>
  );
};

Button.propTypes = {
  classes: PropTypes.object.isRequired,
  /** Anything that can be rendered for Buttons and Text for tag="inputs" placed in `value` attribute */
  children: PropTypes.node,
  /** Block */
  block: PropTypes.bool,
  /** Active state */
  active: PropTypes.bool,
  /** Disabled state */
  disabled: PropTypes.bool,
  /** Tag */
  tag: PropTypes.string,
}

Button.defaultProps = {
  tag: 'button',
  block: false,
  active: false,
  disabled: false,
  onClick: ()=>{},
}

export default Button;

button.test.js

import React from 'react';
import test from 'ava';
import { shallow } from 'enzyme';

import Button from './button';
import styles from './styles';

const reduceClasses = (prev, curr) => Object.assign({}, prev, { [curr]: curr })

const classes = Object.keys(styles).reduce(reduceClasses, {})

const child = "testChild";

test('Basic render', t => {
  const component = shallow(
    <Button classes={classes}>{ child }</Button>
  );

  t.true(
    component.is('button'),
    "it should be a type `button`"
  );

  t.true(
    component.contains(child), 
    "it should contain correct children"
  );
});

test('Tags', t => {
  const component = (tag) => shallow(
    <Button tag={ tag } classes={classes}>{ child }</Button>
  );

  t.true(
    component("a").is('a'),
    "it should be a type `a`"
  );
  
  t.true(
    component("button").is('button'),
    "it should be a `button`"
  );

  t.true(
    component("input").is('input'),
    "it should be a `input`"
  );
});

test('Block', t => {
  const component = () => shallow(
    <Button block classes={classes}>{ child }</Button>
  );

  t.true(
    component().hasClass(classes.block),
    "it should have the block class"
  );
});

test('Active', t => {
  const component = () => shallow(
    <Button active classes={classes}>{ child }</Button>
  );

  t.true(
    component().hasClass(classes.active),
    "it should have the active class"
  );
});

test('Disabled', t => {
  const component = () => shallow(
    <Button disabled classes={classes}>{ child }</Button>
  );

  t.true(
    component().hasClass(classes.disabled),
    "it should have the disabled class"
  );

 t.true(
    component().is('[disabled=true]'),
    "input should be disabled"
  );
});

index.js

import injectSheet from 'react-jss'
import styles from './styles'
import Button from './button'

export default injectSheet(styles)(Button)

styles.js

export default {
  button: {
    backgroundColor: props => props.bg
  },
  block: { /* */ },
  active: { /* */ },
  disabled: { /* */ },
}

styles.test.js

import React from 'react';
import test from 'ava';

import styles from './styles';

test('render root.backgroundColor with props.bg', t => {
  const props = {
    bg: 'red'
  }
  const actual = styles.root.backgroundColor(props);
  const expected = props.bg;

  t.is(actual, expected)
});