├── test
├── mocha.opts
├── tape.js
├── setup.js
├── hello.js
└── mocha.js
├── Hello.js
├── package.json
├── .gitignore
├── LICENSE
└── README.md
/test/mocha.opts:
--------------------------------------------------------------------------------
1 | --ui tdd
2 | --compilers js:babel/register
3 | --require test/setup.js
4 |
--------------------------------------------------------------------------------
/Hello.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | import React from 'react';
4 |
5 | export default React.createClass({
6 | render: function () {
7 |
8 | return (
9 | Hello world!
10 | );
11 | }
12 | });
13 |
--------------------------------------------------------------------------------
/test/tape.js:
--------------------------------------------------------------------------------
1 | // 'use strict';
2 | //
3 | // var test = require('tape');
4 | // var React = require('react/addons');
5 | // var TestUtils = React.addons.TestUtils;
6 | // var Hello = require('../hello.js');
7 | //
8 | //
9 | // test('Hello component', function (t) {
10 | //
11 | // t.test('#renderToStaticMarkup', function (st) {
12 | //
13 | //
14 | // })
15 | // })
16 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "react-test",
3 | "version": "1.0.0",
4 | "description": "A small example of testing react",
5 | "main": "index.js",
6 | "scripts": {
7 | "test": "mocha test"
8 | },
9 | "author": "Besart Hoxhaj",
10 | "license": "MIT",
11 | "devDependencies": {
12 | "jsdom": "^5.6.1",
13 | "mocha": "^2.2.5",
14 | "react": "^0.13.3",
15 | "tape": "^4.0.1",
16 | "babel": "^5.8.19",
17 | "babel-loader": "^5.3.2"
18 | }
19 | }
20 |
--------------------------------------------------------------------------------
/test/setup.js:
--------------------------------------------------------------------------------
1 | // 'use strict';
2 | //
3 | // import jsdom from 'jsdom';
4 | //
5 | // var FAKE_DOM = 'jsDom
';
6 | //
7 | // function setDom () {
8 | //
9 | // if (typeof document !== 'undefined') {
10 | //
11 | // return;
12 | // }
13 | //
14 | // global.document = jsdom.jsdom(FAKE_DOM);
15 | // global.window = document.defaultView;
16 | // global.navigator = window.navigator;
17 | //
18 | // console.log('Just created dom: ', global.document.body.innerHTML);
19 | // }
20 | //
21 | // setDom();
22 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # Logs
2 | logs
3 | *.log
4 |
5 | # Runtime data
6 | pids
7 | *.pid
8 | *.seed
9 |
10 | # Directory for instrumented libs generated by jscoverage/JSCover
11 | lib-cov
12 |
13 | # Coverage directory used by tools like istanbul
14 | coverage
15 |
16 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
17 | .grunt
18 |
19 | # node-waf configuration
20 | .lock-wscript
21 |
22 | # Compiled binary addons (http://nodejs.org/api/addons.html)
23 | build/Release
24 |
25 | # Dependency directory
26 | # https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git
27 | node_modules
28 |
--------------------------------------------------------------------------------
/test/hello.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 |
4 | import React from 'react';
5 | import jsdom from 'jsdom';
6 | import Hello from '../Hello.js';
7 |
8 | describe('jsdom with jquery', function () {
9 |
10 | it('should work', function (done) {
11 |
12 | jsdom.env('', {
13 | virtualConsole: jsdom.createVirtualConsole().sendTo(console),
14 | scripts: ['http://code.jquery.com/jquery-2.1.1.js'],
15 | done: function (err, window) {
16 |
17 | var $ = window.$;
18 |
19 | global.window = window;
20 | global.document = window.document;
21 |
22 | React.render(, global.document.body);
23 | console.log('Title: ', $('h1').text());
24 | done();
25 | }
26 | });
27 | });
28 | });
29 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | The MIT License (MIT)
2 |
3 | Copyright (c) 2015 Besart Hoxhaj
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
23 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Testing react
2 |
3 | A small example on testing react. The tools we are gonna use are:
4 |
5 | - react/addons
6 | - jsdom
7 | - mocha
8 |
9 | ## Mocha
10 |
11 | In order to test react components with mocha we need a pre-compiler to compile es6 and jsx.
12 |
13 | npm install babel babel-loader jsdom --save-dev
14 |
15 | ## Vanilla jsDom
16 |
17 | Is possible to render a component directley in jsdom.
18 |
19 | ```js
20 | // --- Hello.js
21 |
22 | import React from 'react';
23 |
24 | var Hello = React.createClass({
25 |
26 | render: function () {
27 |
28 | return (
29 | Hello world!
30 | );
31 | }
32 | });
33 |
34 | module.exports = Hello;
35 |
36 | // --- test.js
37 |
38 | import React from 'react';
39 | import jsdom from 'jsdom';
40 | import Hello from './Hello.js';
41 |
42 | jsdom.env('', {
43 | virtualConsole: jsdom.createVirtualConsole().sendTo(console),
44 | scripts: ['http://code.jquery.com/jquery-2.1.1.js'],
45 | done: function (err, window) {
46 |
47 | var $ = window.$;
48 |
49 | global.window = window;
50 | global.document = window.document;
51 |
52 | React.render(, global.document.body);
53 | console.log('Title: ', $('h1').text());
54 | done();
55 | }
56 | });
57 | ```
58 |
59 | ## Testing routing
60 |
61 | Sometimes for any number of reason we may want to test some sort of interactio where the user gets redirected.
62 |
63 |
64 |
--------------------------------------------------------------------------------
/test/mocha.js:
--------------------------------------------------------------------------------
1 | // 'use strict';
2 | //
3 | // import Hello from '../Hello.js';
4 | // import React from 'react/addons';
5 | // import RealReact from 'react';
6 | // import assert from 'assert';
7 | //
8 | // const { TestUtils } = React.addons;
9 | //
10 | // describe('Hello component', () => {
11 | //
12 | // it('shallow render', () => {
13 | //
14 | // const renderer = TestUtils.createRenderer();
15 | //
16 | // renderer.render(
17 | //
18 | // );
19 | //
20 | // const output = renderer.getRenderOutput();
21 | //
22 | // assert.equal(output.type, 'h1', 'right tag h1');
23 | // });
24 | //
25 | // it('#renders an h1', () => {
26 | //
27 | // const RenderedComponent = TestUtils.renderIntoDocument();
28 | //
29 | // const ButtonComponent = TestUtils.findRenderedDOMComponentWithTag(RenderedComponent, 'h1');
30 | //
31 | // const ButtonNode = React.findDOMNode(ButtonComponent);
32 | //
33 | // console.log('Render jsdom: ', global.document.body.innerHTML);
34 | // // console.log('Button node: ', ButtonNode);
35 | // });
36 | //
37 | // it('try directly to global.document', () => {
38 | //
39 | // var stringDOM = RealReact.renderToString();
40 | // console.log('String: ', stringDOM);
41 | // RealReact.render(, global.document.body);
42 | //
43 | // console.log('Try again: ', global.document.body.innerHTML);
44 | // });
45 | // });
46 |
--------------------------------------------------------------------------------