Basic setup for using Enzyme/Mocha/Chai with create-react-app

This is a temporary solution. Might change in the near future, this depends on how create-react-app will implement testing.

create-react-app quick-test-example

cd quick-test-example

npm run eject

npm install chai enzyme mocha react-addons-test-utils sinon --save-dev

add test to package.json

 "scripts": {
    //...
    "test": "mocha --require babel-core/register --require ./testSetup.js ./test/*test.js",
    "test:watch": "npm test -- -w"
  }

add testSetup.js file

'use strict';

import jsdom from 'jsdom';

global.document = jsdom.jsdom('<html><body></body></html>');
global.window = document.defaultView;
global.navigator = window.navigator;

function noop() {
  return {};
}

// prevent mocha tests from breaking when trying to require a css file
require.extensions['.css'] = noop;
require.extensions['.svg'] = noop;

Add "The only React.js component test you'll ever need (Enzyme + Chai)" https://gist.github.com/thevangelist/e2002bc6b9834def92d46e4d92f15874

test/sometest.test.js

import React from 'react'
import { shallow } from 'enzyme'
import { expect } from 'chai'
import App from '../src/App'

const wrapper = shallow(<App />);

describe('(Component) App', () => {
  it('renders...', () => {
    expect(wrapper).to.have.lengthOf(1);
  });
});

Finally add a .babelrc file (for mocha to handle es6)

{
 "presets": ["react", "es2015"]
}

then run

npm run test

Start adding your tests.

desko27/TestSetupExampleCRAEnzymeChaiMocka.md

Basic setup for using Enzyme/Mocha/Chai with create-react-app