react-test-renderer - npm Package Compare versions

Comparing version 1.1.0 to 15.3.0

103

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');

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"
		}
		}

108

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

LICENSE

test.js

react-test-renderer - npm Package Compare versions

New alerts

Fixed alerts

Improved metrics

Worsened metrics

Dependency changes