unexpected-react test

index.js

require('babel-polyfill'); // Necessary for PhantomJS

var unexpected = require('unexpected');
var unexpectedReact = require('unexpected-react');

var React = require('react');
var TestUtils = require('react-addons-test-utils');

var expect = unexpected.clone().use(unexpectedReact);

describe('tests', function() {
  it('should be boring', function() {
    return expect(123, 'not to be', 456);
  });

  it('should be really boring', function() {
    return expect(123, 'to be', 123);
  });

  it('should be executed and the promise called', function() {
    return expect(<div>My Div Content</div>, 'to have rendered', <div>My Div Content</div>);
  });

  var TestComponent = React.createClass({
    render: function() {
      return (
        <div className='someclass'>
          <ul>
            <li>List Item 1</li>
            <li>List Item 2</li>
          </ul>
        </div>
      )
    }
  });

  it('should be a more interesting and detailed test', function() {
    var renderedComponent = TestUtils.renderIntoDocument(<TestComponent />);
    var test = (
      <div className='someclass'>
        <li>List Item 1</li>
        <li>List Item 2</li>
      </div>
    );

    return expect(renderedComponent, 'to have rendered', test);
  });

  it('should run the promise .then callback', function(done) {
    return expect(<div>My Content</div>, 'to have rendered', <div>My Content</div>).then(function() {
      console.log('promise .then called');
      done();
      return null;
    })
  });
})

karma.conf.js

module.exports = function (karmaConfig) {
  karmaConfig.set({
    // I'm running the following browser versions
    // PhantomJS 2.1.1 (Mac OS X 0.0.0)
    // Chrome 47.0.2526 (Mac OS X 10.10.5)
    // Firefox 41.0.0 (Mac OS X 10.10.0)
    // Safari 9.0.3 (Mac OS X 10.10.5)
    browsers: ['PhantomJS', 'Chrome', 'Firefox', 'Safari'],

    files: [
      'index.js'
    ],

    frameworks: ['mocha', 'unexpected'],

    preprocessors: {
      '**/*': ['webpack']
    },

    reporters: ['progress'],

    webpack: {
      module: {
        loaders: [
          {test: /\.json$/, loader: 'json'},
          {
            test: /\.js$/,
            exclude: /(node_modules)/,
            loader: 'babel',
            query: {
                presets: ['react']
            }
          }
        ]
      }
    },

    webpackMiddleware: {
      stats: {
        assets: true,
        chunkModules: false,
        chunkOrigins: false,
        chunks: false,
        colors: true,
        hash: false,
        timings: true,
        version: false
      }
    }
  });
};

package.json

{
  "name": "unexpectedreacttest",
  "version": "1.0.0",
  "description": "unexpected-react karma test",
  "main": "index.js",
  "scripts": {
    "test": "node_modules/.bin/karma start"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "babel": "^6.3.26",
    "babel-core": "^6.4.5",
    "babel-loader": "^6.2.1",
    "babel-polyfill": "^6.3.14",
    "babel-preset-react": "^6.3.13",
    "json-loader": "^0.5.4",
    "karma": "^0.13.19",
    "karma-chrome-launcher": "^0.2.2",
    "karma-firefox-launcher": "^0.1.7",
    "karma-mocha": "^0.2.1",
    "karma-phantomjs-launcher": "^1.0.0",
    "karma-safari-launcher": "^0.1.1",
    "karma-unexpected": "git://github.com/mhintz/karma-unexpected.git",
    "karma-webpack": "^1.7.0",
    "mocha": "^2.4.4",
    "phantomjs-prebuilt": "^2.1.3",
    "react": "^0.14.6",
    "react-addons-test-utils": "^0.14.6",
    "react-test-utils": "0.0.1",
    "unexpected": "^10.8.0",
    "unexpected-react": "^0.5.1",
    "webpack": "^1.12.12"
  }
}