├── .gitignore ├── .babelrc ├── tests.webpack.js ├── .travis.yml ├── src ├── __tests__ │ └── app-test.js ├── app.js └── components │ ├── root.js │ └── __tests__ │ └── root-test.js ├── README.md ├── karma.conf.js └── package.json /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | dist 3 | .idea 4 | -------------------------------------------------------------------------------- /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["react", "es2015"] 3 | } 4 | -------------------------------------------------------------------------------- /tests.webpack.js: -------------------------------------------------------------------------------- 1 | var context = require.context('./src', true, /-test\.js$/); 2 | context.keys().forEach(context); 3 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | node_js: 3 | - "0.12" 4 | before_install: 5 | - "export DISPLAY=:99.0" 6 | - "sh -e /etc/init.d/xvfb start" 7 | -------------------------------------------------------------------------------- /src/__tests__/app-test.js: -------------------------------------------------------------------------------- 1 | describe('app', function () { 2 | it('loads without problems', function () { 3 | require('../app'); 4 | }); 5 | }); 6 | -------------------------------------------------------------------------------- /src/app.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import Root from './components/root'; 4 | 5 | let div = document.createElement('div'); 6 | 7 | document.body.appendChild(div); 8 | 9 | ReactDOM.render(, div); 10 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # react-karma-webpack-testing [![Build Status](https://travis-ci.org/justinwoo/react-karma-webpack-testing.svg)](https://travis-ci.org/justinwoo/react-karma-webpack-testing) [![CircleCI](https://circleci.com/gh/chintan9/react-karma-webpack-testing.svg?style=svg)](https://circleci.com/gh/chintan9/react-karma-webpack-testing) 2 | 3 | Example repository for testing React components using Karma and Webpack. Totally copies ideas from React-Router. 4 | 5 | See the blog post [here](http://qiita.com/kimagure/items/f2d8d53504e922fe3c5c) 6 | -------------------------------------------------------------------------------- /karma.conf.js: -------------------------------------------------------------------------------- 1 | var webpack = require('webpack'); 2 | 3 | module.exports = function (config) { 4 | config.set({ 5 | 6 | browsers: [ process.env.CONTINUOUS_INTEGRATION ? 'Firefox' : 'Chrome' ], 7 | 8 | singleRun: true, 9 | 10 | frameworks: [ 'mocha' ], 11 | 12 | files: [ 13 | 'tests.webpack.js' 14 | ], 15 | 16 | preprocessors: { 17 | 'tests.webpack.js': [ 'webpack', 'sourcemap' ] 18 | }, 19 | 20 | reporters: [ 'dots' ], 21 | 22 | webpack: { 23 | devtool: 'inline-source-map', 24 | module: { 25 | loaders: [ 26 | { test: /\.js$/, loader: 'babel-loader' } 27 | ] 28 | } 29 | }, 30 | 31 | webpackServer: { 32 | noInfo: true 33 | } 34 | 35 | }); 36 | }; 37 | -------------------------------------------------------------------------------- /src/components/root.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | class Root extends React.Component { 4 | constructor(props) { 5 | super(props); 6 | 7 | this.state = { 8 | name: '' 9 | }; 10 | 11 | this.handleChange = (e) => { 12 | var newName = e.target.value; 13 | 14 | this.setState({ 15 | name: newName 16 | }); 17 | } 18 | } 19 | 20 | render() { 21 | return ( 22 |
23 |

Hello World!!

24 | 25 |

26 | Please input your name here: 27 | 31 |

32 | 33 |

Hello, {this.state.name}

34 |
35 | ); 36 | } 37 | } 38 | 39 | export default Root; 40 | -------------------------------------------------------------------------------- /src/components/__tests__/root-test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import TestUtils from 'react-addons-test-utils'; 4 | import expect from 'expect'; 5 | import Root from '../root'; 6 | 7 | describe('root', function () { 8 | it('renders without problems', function () { 9 | var root = TestUtils.renderIntoDocument(); 10 | expect(root).toExist(); 11 | }); 12 | 13 | it('changes without problems', function () { 14 | var root = TestUtils.renderIntoDocument(); 15 | 16 | const inputNode = ReactDOM.findDOMNode(root.refs.input); 17 | 18 | const newValue = 'some text'; 19 | inputNode.value = newValue; 20 | TestUtils.Simulate.change(inputNode); 21 | 22 | const nameNode = ReactDOM.findDOMNode(root.refs.name); 23 | expect(nameNode.textContent).toEqual(newValue); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-karma-webpack-testing", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "karma start", 8 | "test-multi": "karma start --single-run=false" 9 | }, 10 | "author": "Justin Woo", 11 | "license": "MIT", 12 | "devDependencies": { 13 | "babel-core": "^6.3.2", 14 | "babel-loader": "^6.2.0", 15 | "babel-preset-es2015": "^6.1.18", 16 | "babel-preset-react": "^6.1.18", 17 | "expect": "^1.13.0", 18 | "karma": "^1.3.0", 19 | "karma-chrome-launcher": "^2.0.0", 20 | "karma-cli": "1.0.1", 21 | "karma-firefox-launcher": "^1.0.0", 22 | "karma-mocha": "^1.0.1", 23 | "karma-sourcemap-loader": "^0.3.6", 24 | "karma-webpack": "^1.7.0", 25 | "mocha": "^3.2.0", 26 | "react": "^15.1.0", 27 | "react-addons-test-utils": "^15.1.0", 28 | "react-dom": "^15.1.0", 29 | "webpack": "^1.12.9" 30 | } 31 | } 32 | --------------------------------------------------------------------------------