Mocha & React & CSS Modules

mocha-react-css-modules.js

// setup.js
import hook from 'css-modules-require-hook'
import sass from 'node-sass'

hook({
  extensions: [ '.scss' ],
  preprocessCss: data => sass.renderSync({ data }).css
})


// component.js
import React from 'react'
import styles from './mocha-react-css-modules.scss'

export default class Component extends React.Component {
  render() {
    return <div className={ styles['some-class'] }>Hello</div>
  }
}


// component.spec.js
import React from 'react/addons'
import { expect } from 'chai'
import Component from './component.js'
import styles from './mocha-react-css-modules.scss'

const TestUtils = React.addons.TestUtils

it('should have a valid CSS Modules class', () => {
  const component = TestUtils.renderIntoDocument(<Component />)
  const div = TestUtils.findRenderedDOMComponentWithTag(component, 'div')
  expect(div.className).to.equal(styles['some-class'])
})

mocha-react-css-modules.scss

$black: '#aaa';

.some-class {
  color: $black;
}

mocha-react-css-modules.sh

mocha --require setup.js --compilers js:babel-core/register *.spec.js