Launch Week Day 3: Introducing Organization Notifications in Socket.Learn More →
Socket
Book a DemoSign in
Socket
Book a DemoSign in

react-test-renderer

Package Overview
Dependencies
Maintainers
6
Versions
2703
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-test-renderer - npm Package Compare versions

Comparing version
1.1.0
 to
15.3.0
+2
-101
index.js

@@ -1,103 +0,4 @@

var TestUtils = require('react-addons-test-utils');
var internalInstanceKey;
var INTERNAL_INSTANCE_KEY = /^__reactInternalInstance/;
'use strict';
function getInternalInstance(element) {
if (element._reactInternalComponent) {
return element._reactInternalComponent;
}
if (!internalInstanceKey) {
internalInstanceKey = Object.keys(element).find(function(key) {
return INTERNAL_INSTANCE_KEY.test(key);
});
}
return element[internalInstanceKey];
}
function find(target, predicate) {
return findAll(target, predicate)[0];
}
function findAll(target, predicate) {
return TestUtils.findAllInRenderedTree(target, function(item) {
if (TestUtils.isCompositeComponent(item)) {
return false;
}
return predicate(createRenderedElement(item));
}).map(createRenderedElement);
}
function findComponent(target, component) {
return findAllComponent(target, component)[0];
}
function findAllComponent(target, component) {
return TestUtils.findAllInRenderedTree(target, function(item) {
return TestUtils.isCompositeComponentWithType(item, component);
}).map(createRenderedComponent);
}
function createSearchMethods(target) {
return {
find: function(predicate) {
return find(target, predicate);
},
findAll: function(predicate) {
return findAll(target, predicate);
},
findComponent: function(component) {
return findComponent(target, component);
},
findAllComponent: function(component) {
return findAllComponent(target, component);
}
};
}
function createSimulateMethod(element) {
return function simulate(eventName, eventOpts) {
TestUtils.Simulate[eventName](element, eventOpts);
};
}
function createRenderedElement(element) {
var currentElement = getInternalInstance(element)._currentElement;
return {
type: currentElement.type,
props: currentElement.props,
simulate: createSimulateMethod(element)
};
}
function createRenderedComponent(component) {
var renderedComponent = component._reactInternalInstance._renderedComponent;
var rootElement = renderedComponent._nativeNode || renderedComponent._nodeWithLegacyProperties;
var root = createRenderedElement(rootElement);
var refs = {};
Object.keys(component.refs).forEach(function(ref) {
refs[ref] = createRenderedElement(component.refs[ref]);
});
var methods = createSearchMethods(component);
return Object.assign({
root: root,
refs: refs,
}, createSearchMethods(component));
}
function createRenderedTree(tree) {
return createSearchMethods(tree);
}
function render(element) {
return createRenderedTree(TestUtils.renderIntoDocument(element));
}
module.exports = render;
module.exports = require('react/lib/ReactTestRenderer');
+14
-14
package.json
{
"name": "react-test-renderer",
"version": "1.1.0",
"description": "A lightweight solution to testing fully-rendered React Components",
"version": "15.3.0",
"description": "React package for snapshot testing.",
"main": "index.js",
"scripts": {
"test": "mocha"
"repository": "facebook/react",
"keywords": [
"react",
"react-native",
"react-testing"
],
"license": "BSD-3-Clause",
"bugs": {
"url": "https://github.com/facebook/react/issues"
},
"author": "James Kyle <me@thejameskyle.com>",
"license": "ISC",
"dependencies": {
"object-assign": "^4.1.0",
"react-addons-test-utils": "^0.14.0 || ^15.0.0"
},
"devDependencies": {
"jsdom": "^9.1.0",
"mocha": "^2.4.5",
"react": "^0.14.0 || ^15.0.0"
"homepage": "https://facebook.github.io/react/",
"peerDependencies": {
"react": "^15.3.0"
}
}
+13
-95
README.md

@@ -1,104 +0,22 @@

# react-test-renderer
# `react-test-renderer`
> A lightweight solution to testing fully-rendered React Components
This package provides an experimental React renderer that can be used to render React components to pure JavaScript objects, without depending on the DOM or a native mobile environment.
## Installation
Essentially, this package makes it easy to grab a snapshot of the "DOM tree" rendered by a React DOM or React Native component without using a browser or jsdom.
```sh
$ npm install react-test-renderer
```
Usage:
## Usage
```jsx
const ReactTestRenderer = require('react-test-renderer');
```js
const render = require('react-test-renderer');
const stub = createStub();
render(<MyComponent onClick={stub}/>)
.find(element => element.type === 'button')
.simulate('click');
assert.ok(stub.called);
```
## API
```js
interface Searchable {
find(predicate: (element: RenderedElement) => boolean): RenderedElement;
findAll(predicate: (element: RenderedElement) => boolean): Array<RenderedElement>;
findComponent(component: ReactComponent): RenderedComponent;
findAllComponent(component: ReactComponent): RenderedComponent;
}
interface RenderedElement mixins Searchable {
type: string;
props: Object;
simulate(eventName: string, eventOpts?: Object): void;
}
interface RenderedComponent mixins Searchable {
root: RenderedElement;
refs: { [name: string]: RenderedElement };
}
interface RenderedTree mixins Searchable {}
function render(ReactElement): RenderedTree
```
## Examples
Find an element:
```js
var tree = render(
<section>
<h1>Hello World</h1>
<p>...</p>
</section>
const renderer = ReactTestRenderer.create(
<Link page="https://www.facebook.com/">Facebook</Link>
);
var heading = tree.find(element => element.type === 'h1');
assert.equal(heading.type, 'h1');
assert.deepEqual(heading.props, {
children: 'Hello World'
});
console.log(renderer.toJSON());
// { type: 'a',
// props: { href: 'https://www.facebook.com/' },
// children: [ 'Facebook' ] }
```
Simulate an event on a component:
```js
var stub = createStub();
var tree = render(
<section>
<button onClick={stub}>Click Me!</button>
</section>
);
tree.find(element => element.type === 'button')
.simulate('click');
assert.ok(stub.called);
```
## Usage with jsdom
Using [jsdom](https://github.com/tmpvar/jsdom) you can run this test renderer
entirely in Node. Just set this up before you run your tests:
```sh
$ npm install --save-dev jsdom
```
```js
var jsdom = require('jsdom').jsdom;
global.window = jsdom(undefined, { url: 'about:blank' }).defaultView;
global.document = global.window.document;
```
> Note: This was tested using jsdom@9
You can also use Jest's snapshot testing feature to automatically save a copy of the JSON tree to a file and check in your tests that it hasn't changed: http://facebook.github.io/jest/blog/2016/07/27/jest-14.html.
.npmignore

Sorry, the diff of this file is not supported yet

-22
LICENSE
COPYRIGHT (c) 2016 James Kyle <me@thejameskyle.com>
MIT License
Permission is hereby granted, free of charge, to any person obtaining
a copy of this software and associated documentation files (the
"Software"), to deal in the Software without restriction, including
without limitation the rights to use, copy, modify, merge, publish,
distribute, sublicense, and/or sell copies of the Software, and to
permit persons to whom the Software is furnished to do so, subject to
the following conditions:
The above copyright notice and this permission notice shall be
included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
-155
test.js
var assert = require('assert');
var React = require('react');
var jsdom = require('jsdom').jsdom;
var render = require('./');
global.window = jsdom(undefined, { url: 'about:blank' }).defaultView;
global.document = global.window.document;
var Button = React.createClass({
render: function() {
return React.createElement('button', {
ref: 'button',
className: 'btn btn-primary',
onClick: this.props.onClick
}, this.props.children);
}
});
var Application = React.createClass({
render: function() {
return React.createElement('section', {
ref: 'section'
},
React.createElement('h1', {
ref: 'heading'
}, 'Hello World'),
React.createElement(Button, {
ref: 'button',
onClick: this.props.onClick
}, 'Click Me!'),
React.createElement(Button, {
ref: 'button',
onClick: this.props.onClick
}, 'Click Me Too!')
);
}
});
function createStub() {
return function stub() {
stub.called = true;
};
}
describe('render()', function() {
it('should create a tree', function() {
var tree = render(React.createElement(Application));
assert.ok(tree.find);
assert.ok(tree.findAll);
assert.ok(tree.findComponent);
assert.ok(tree.findAllComponent);
});
it('should find an element', function() {
var stub = createStub();
var tree = render(React.createElement(Application, {
onClick: stub
}));
var heading = tree.find(function(element) {
return element.type === 'h1';
});
assert.equal(heading.type, 'h1');
assert.deepEqual(heading.props, {
children: 'Hello World'
});
});
it('should find a deep element', function() {
var stub = createStub();
var tree = render(React.createElement(Application, {
onClick: stub
}));
var heading = tree.find(function(element) {
return element.type === 'button';
});
assert.equal(heading.type, 'button');
assert.deepEqual(heading.props, {
onClick: stub,
className: 'btn btn-primary',
children: 'Click Me!'
});
});
it('should find multiple elements', function() {
var stub = createStub();
var tree = render(React.createElement(Application, {
onClick: stub
}));
var elements = tree.findAll(function(element) {
return element.type === 'h1' || element.type === 'button';
});
assert.equal(elements[0].type, 'h1');
assert.equal(elements[1].type, 'button');
assert.equal(elements[2].type, 'button');
});
it('should be able to find a component', function() {
var stub = createStub();
var tree = render(React.createElement(Application, {
onClick: stub
}));
var button = tree.findComponent(Button);
assert.equal(button.root.type, 'button');
assert.ok(button.refs.button);
});
it('should be able to find multiple components', function() {
var stub = createStub();
var tree = render(React.createElement(Application, {
onClick: stub
}));
var buttons = tree.findAllComponent(Button);
assert.equal(buttons[0].root.type, 'button');
assert.equal(buttons[1].root.type, 'button');
});
it('should be able to find an element from a component', function() {
var stub = createStub();
var tree = render(React.createElement(Application, {
onClick: stub
}));
var button = tree
.findComponent(Button)
.find(function(element) {
return element.type === 'button';
});
assert.equal(button.type, 'button');
});
it('should be able to simulate an event on an element', function() {
var stub = createStub();
var tree = render(React.createElement(Application, {
onClick: stub
}));
tree.find(function(element) {
return element.type === 'button';
}).simulate('click');
assert.ok(stub.called);
});
});