React component testing skeleton

.babelrc

{
  "stage": 2,
  "loose": "all"
}

.travis.yml

sudo: false

language: node_js
node_js:
  - stable

cache:
  directories:
    - node_modules

after_success:
  - cat ./coverage/lcov.info | ./node_modules/codecov.io/bin/codecov.io.js

branches:
  only:
    - master

README.md

Test skeleton for React components with Karma running Tape tests on PhantomJS, with help from Babel and Webpack.

Isparta code coverage is also set up and configured to run on Travis CI, submitting results to Codecov.

git clone https://gist.github.com/593d7d70331f95bf62ff.git react-test-skeleton
cd react-test-skeleton
mkdir src test
mv index.js src/
mv index-test.js test/
npm install
npm test

Code goes in src/, tests go in *-test.js files in test/.

In test files top-level 'src' imports are aliased to the src/ directory for convenience.

index-test.js

import React from 'react'
import {render} from 'react-dom'
import test from 'tape'

import HelloWorld from 'src/index'

test('HelloWorld', t => {
  t.plan(1)

  let node = document.createElement('div')

  render(<HelloWorld/>, node, () => {
    let h1 = node.querySelector('h1')
    t.equal('Hello world!', h1.textContent)
  })
})

index.js

import React from 'react'

export default () => <h1>Hello world!</h1>

karma.conf.js

process.env.NODE_ENV = 'test'

var path = require('path')

var webpack = require('webpack')

var isCi = process.env.CONTINUOUS_INTEGRATION === 'true'
var runCoverage = process.env.COVERAGE === 'true' || isCi

var loaders = [
  {test: /\.js$/, loader: 'babel', exclude: /node_modules/}
]

var reporters = ['dots']

if (runCoverage) {
  loaders.push({test: /\.js$/, include: path.resolve('src/'), loader: 'isparta'})
  reporters.push('coverage')
}

module.exports = function(config) {
  config.set({
    browsers: ['PhantomJS'],
    frameworks: ['tap'],
    reporters: reporters,
    coverageReporter: {
      reporters: [
        {type: 'html', subdir: 'html'},
        {type: 'lcovonly', subdir: '.'}
      ]
    },
    files: [
      'node_modules/phantomjs-polyfill/bind-polyfill.js',
      'test/*-test.js'
    ],
    preprocessors: {
      'test/*-test.js': ['webpack', 'sourcemap']
    },
    webpack: {
      devtool: 'inline-source-map',
      node: {
        fs: 'empty'
      },
      plugins: [
        new webpack.DefinePlugin({
          'process.env.NODE_ENV': JSON.stringify('test')
        })
      ],
      resolve: {
        alias: {
          'src': path.resolve(__dirname, 'src')
        }
      },
      module: {
        loaders: loaders
      }
    },
    webpackServer: {
      noInfo: true
    },
    singleRun: isCi
  })
}

package.json

{
  "name": "react-testing-skeleton",
  "scripts": {
    "test": "karma start"
  },
  "devDependencies": {
    "react": "0.14.2",
    "react-dom": "0.14.2",

    "babel": "5.8.29",
    "babel-core": "5.8.33",

    "karma": "0.13.15",
    "codecov.io": "0.1.6",
    "isparta-loader": "1.0.0",
    "karma-coverage": "0.5.3",
    "karma-phantomjs-launcher": "0.2.1",
    "karma-sourcemap-loader": "0.3.6",
    "karma-tap": "1.0.3",
    "karma-webpack": "1.7.0",
    "phantomjs": "1.9.18",
    "phantomjs-polyfill": "0.0.1",
    "react-addons-test-utils": "0.14.2",
    "tape": "4.2.2",

    "webpack": "1.12.3",
    "babel-loader": "5.3.2"
  }
}