Created
August 23, 2015 09:36
-
-
Save LucaColonnello/22e898cc8bb4f403fad6 to your computer and use it in GitHub Desktop.
React Test BDD with Mocha and JSDom
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // components/App-test.jsx | |
| import "../utils/test/dom"; | |
| import assert from 'assert'; | |
| import React from 'react/addons'; | |
| import App from '../App'; | |
| const TestUtils = React.addons.TestUtils; | |
| describe('App component', function( ) { | |
| let app; | |
| it( 'should render Hello World!!', function( ) { | |
| app = TestUtils.renderIntoDocument( React.createElement( App ) ); | |
| assert.deepEqual( TestUtils.findRenderedDOMComponentWithTag( app, "span" ).getDOMNode( ).innerHTML, "Hello World!!" ); | |
| } ); | |
| it( 'should render the props content after click', function( ) { | |
| app = TestUtils.renderIntoDocument( React.createElement( App, { content: 'New Text!!' } ) ); | |
| TestUtils.Simulate.click( TestUtils.findRenderedDOMComponentWithTag( app, "span" ).getDOMNode( ) ); | |
| assert.deepEqual( TestUtils.findRenderedDOMComponentWithTag( app, "span" ).getDOMNode( ).innerHTML, "New Text!!" ); | |
| } ); | |
| }); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // components/App.jsx | |
| import React from 'react/addons'; | |
| const TestUtils = React.addons.TestUtils; | |
| export default class App extends React.Component { | |
| constructor ( props, context ) { | |
| super( props, context ); | |
| this.props = props; | |
| this.state = { | |
| content: 'Hello World!!' | |
| }; | |
| this.context = context; | |
| } | |
| componentWillReceiveProps ( nextProps ) { } | |
| componentReceiveProps ( ) { } | |
| changeText ( ) { | |
| this.setState( { content: this.props.content } ); | |
| } | |
| render ( ) { | |
| return ( | |
| <div> | |
| <span onClick={::this.changeText}>{this.state.content}</span> | |
| </div> | |
| ); | |
| } | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // utils/test/dom.js | |
| // from http://jaketrent.com/post/testing-react-with-jsdom/ | |
| var jsdom = require('jsdom'); | |
| // setup the simplest document possible | |
| var doc = jsdom.jsdom('<!doctype html><html><body></body></html>'); | |
| // get the window object out of the document | |
| var win = doc.defaultView | |
| // set globals for mocha that make access to document and window feel | |
| // natural in the test environment | |
| global.document = doc | |
| global.window = win | |
| // take all properties of the window object and also attach it to the | |
| // mocha global object | |
| propagateToGlobal(win) | |
| // from mocha-jsdom https://github.com/rstacruz/mocha-jsdom/blob/master/index.js#L80 | |
| function propagateToGlobal (window) { | |
| for (let key in window) { | |
| if (!window.hasOwnProperty(key)) continue | |
| if (key in global) continue | |
| global[key] = window[key] | |
| } | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| module.exports = function (grunt) { | |
| // Load grunt tasks automatically | |
| require('load-grunt-tasks')(grunt); | |
| // Define the configuration for all the tasks | |
| grunt.initConfig({ | |
| // mocha Tests | |
| mochaTest: { | |
| client: { | |
| options: { | |
| reporter: 'spec', | |
| require: './mocha-babel.js' | |
| }, | |
| src: ['components/tests/*.js'] | |
| } | |
| } | |
| }); | |
| grunt.registerTask('test:client', [ | |
| 'mochaTest:client' | |
| ]); | |
| grunt.registerTask('test', [ | |
| 'test:client' | |
| ]); | |
| }; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // mocha-babel.js | |
| require('babel/register')({ | |
| stage: 0 | |
| }); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "scripts": { | |
| "test": "grunt test", | |
| }, | |
| "author": "Luca Colonnello", | |
| "devDependencies": { | |
| "babel": "5.6.14", | |
| "babel-core": "5.6.15", | |
| "grunt": "^0.4.5", | |
| "grunt-mocha-test": "^0.12.6", | |
| "jsdom": "3.1.2", | |
| "load-grunt-tasks": "^0.6.0", | |
| "mocha": "^2.1.0", | |
| }, | |
| "dependencies": { | |
| "react": "^0.13", | |
| }, | |
| "engines": { | |
| "node": ">=0.10.0" | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment