Button.js

import React from 'react';
import classNames from 'classnames';

const Button = React.createClass({
  propTypes: {
    className: React.PropTypes.string,
    text: React.PropTypes.string.isRequired,
    color: React.PropTypes.oneOf(['default', 'primary', 'success', 'danger', 'warning', 'info']),
    size: React.PropTypes.oneOf(['small', 'large', 'esmall']),
    block: React.PropTypes.bool,
    type: React.PropTypes.oneOf(['button', 'submit', 'reset'])
  },
  getDefaultProps() {
    return {
      color: 'default',
      type: 'button'
    };
  },
  render() {
    const {text, color, size, block, ...props} = this.props;
    const className = classNames(`btn btn-${color}`, {
      'btn-block': block,
      'btn-sm': size === 'small',
      'btn-lg': size === 'large',
      'btn-xs': size === 'esmall'
    }, this.props.className);

    return (
      <button {...props} className={className}>
        {this.props.text}
      </button>
    );
  }
});

export default Button;

Button.spec.js

import {expect} from 'chai';
import React from 'react';
import Button from '../../../src/components/Control/Button';

describe('components/Control/Button', () => {
  it('should render with default properties', () => {
    expect(
      <button className="btn btn-default" type="button">test</button>
    ).shallowRenderEqual(
      <Button text="test" />
    );
  });

  it('should render with custom color', () => {
    expect(
      <button className="btn btn-info" type="button">test</button>
    ).shallowRenderEqual(
      <Button text="test" color="info" />
    );
  });

  it('should render with custom size', () => {
    expect(
      <button className="btn btn-default btn-xs" type="button">test</button>
    ).shallowRenderEqual(
      <Button text="test" size="esmall" />
    );
  });

  it('should render with block prop', () => {
    expect(
      <button className="btn btn-default btn-block" type="button">test</button>
    ).shallowRenderEqual(
      <Button text="test" block />
    );
  });

  it('should render with custom className', () => {
    expect(
      <button className="btn btn-default test" type="button">test</button>
    ).shallowRenderEqual(
      <Button text="test" className="test" />
    );
  });

  it('should render with custom type', () => {
    expect(
      <button className="btn btn-default" type="submit">test</button>
    ).shallowRenderEqual(
      <Button text="test" type="submit" />
    );
  });
});