<commit_before># skin-deep

Testing helpers for use with React's shallowRender test utils.

[![npm version](https://img.shields.io/npm/v/skin-deep.svg)](https://www.npmjs.com/package/skin-deep) [![Build Status](https://img.shields.io/travis/glenjamin/skin-deep/master.svg)](https://travis-ci.org/glenjamin/skin-deep) [![Coverage Status](https://coveralls.io/repos/glenjamin/skin-deep/badge.svg?branch=master)](https://coveralls.io/r/glenjamin/skin-deep?branch=master) ![MIT Licensed](https://img.shields.io/npm/l/skin-deep.svg)

<!-- START doctoc generated TOC please keep comment here to allow auto update -->
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->


- [Install](#install)
- [Quick Start](#quick-start)
- [Usage](#usage)
  - [Rendering](#rendering)
  - [Extracting portions of the result](#extracting-portions-of-the-result)
  - [Triggering events](#triggering-events)
  - [Going deeper](#going-deeper)
  - [Use with test frameworks](#use-with-test-frameworks)
- [API Docs](#api-docs)
  - [.shallowRender(element [, context])](#shallowrenderelement--context)
  - [tree.reRender(element [, context])](#treererenderelement--context)
  - [tree](#tree)
    - [tree.type](#treetype)
    - [tree.props](#treeprops)
    - [tree.text()](#treetext)
    - [tree.toString()](#treetostring)
    - [tree.getRenderOutput()](#treegetrenderoutput)
    - [tree.getMountedInstance()](#treegetmountedinstance)
    - [tree.subTree(selector [, matcher])](#treesubtreeselector--matcher)
    - [tree.everySubTree(selector [, matcher])](#treeeverysubtreeselector--matcher)
    - [tree.dive(path)](#treedivepath)
  - [Using Selectors](#using-selectors)
  - [Using Matchers](#using-matchers)
  - [.exact(props)](#exactprops)
  - [.any](#any)
- [Troubleshooting](#troubleshooting)
  - [Errors when bundling](#errors-when-bundling)

<!-- END doctoc generated TOC please keep comment here to allow auto update -->

## Install

```sh
npm install skin-deep
```

## Quick Start

```jsx
var React = require('react');

var MyComponent = React.createClass({
  displayName: 'MyComponent',
  render: function() {
    return (
      <ul>
        <li><a href="/">Home</a></li>
        <li><a href="/abc">Draw</a></li>
        <li><a href="/def">Away</a></li>
      </ul>
    )
  }
});

var assert = require('assert');
var sd = require('skin-deep');

var tree = sd.shallowRender(<MyComponent />);

var homeLink = tree.subTree('a', { href: '/' });

assert.equal(homeLink.type, 'a');
assert.equal(homeLink.props.href, '/');
assert.equal(homeLink.text(), 'Home');
```

## Usage

The goal of skin-deep is to provide higher level functionality built on top of the Shallow Rendering test utilities provided by React 0.13+.

By default, shallow rendering gives you a way to see what a component would render without continuing along into rendering it's children. This is a very powerful baseline, but in my opinion it isn't enough to create good UI tests. You either have to assert on the whole rendered component, or manually traverse the tree like this:

```js
assert(rendered.props.children[1].props.children[2].children, 'Click Here');
```

By their nature user interfaces change a lot - sometimes these changes are to behaviour, but sometimes they're simply changes to wording or minor display changes. Ideally, we'd want non-brittle UI tests which can survive these superficial changes, but still check that the application behaves as expected.

### Rendering

Use the `shallowRender` function to get a `tree` you can interact with.

```jsx
var sd = require('skin-deep');

var tree = sd.shallowRender(<MyComponent />);
```

You can now inspect the the tree to see it's contents

```js
tree.getRenderOutput();
// -> ReactElement, same as normal shallow rendering

tree.type;
// -> The component type of the root element

tree.props;
// -> The props of the root element
```

The real benefit's of skin deep come from the ability to extract small portions of the tree with a jQuery-esque API. You can then assert only on these sub-trees.

### Extracting portions of the result

Extraction methods all take a CSS-esque selector as the first argument. This is commonly a component or tag name, but can also be a class or ID selector. The special value '*' can be used to match anything.

The second (optional) argument is the matcher, this can be an object to match against props, or a predicate function which will be passed each node and can decide whether to include it.

```jsx
tree.subTree('Button');
// -> the first Button component<commit_msg>README: minor spelling fixes<commit_after># skin-deep

Testing helpers for use with React's shallowRender test utils.

[![npm version](https://img.shields.io/npm/v/skin-deep.svg)](https://www.npmjs.com/package/skin-deep) [![Build Status](https://img.shields.io/travis/glenjamin/skin-deep/master.svg)](https://travis-ci.org/glenjamin/skin-deep) [![Coverage Status](https://coveralls.io/repos/glenjamin/skin-deep/badge.svg?branch=master)](https://coveralls.io/r/glenjamin/skin-deep?branch=master) ![MIT Licensed](https://img.shields.io/npm/l/skin-deep.svg)

<!-- START doctoc generated TOC please keep comment here to allow auto update -->
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->


- [Install](#install)
- [Quick Start](#quick-start)
- [Usage](#usage)
  - [Rendering](#rendering)
  - [Extracting portions of the result](#extracting-portions-of-the-result)
  - [Triggering events](#triggering-events)
  - [Going deeper](#going-deeper)
  - [Use with test frameworks](#use-with-test-frameworks)
- [API Docs](#api-docs)
  - [.shallowRender(element [, context])](#shallowrenderelement--context)
  - [tree.reRender(element [, context])](#treererenderelement--context)
  - [tree](#tree)
    - [tree.type](#treetype)
    - [tree.props](#treeprops)
    - [tree.text()](#treetext)
    - [tree.toString()](#treetostring)
    - [tree.getRenderOutput()](#treegetrenderoutput)
    - [tree.getMountedInstance()](#treegetmountedinstance)
    - [tree.subTree(selector [, matcher])](#treesubtreeselector--matcher)
    - [tree.everySubTree(selector [, matcher])](#treeeverysubtreeselector--matcher)
    - [tree.dive(path)](#treedivepath)
  - [Using Selectors](#using-selectors)
  - [Using Matchers](#using-matchers)
  - [.exact(props)](#exactprops)
  - [.any](#any)
- [Troubleshooting](#troubleshooting)
  - [Errors when bundling](#errors-when-bundling)

<!-- END doctoc generated TOC please keep comment here to allow auto update -->

## Install

```sh
npm install skin-deep
```

## Quick Start

```jsx
var React = require('react');

var MyComponent = React.createClass({
  displayName: 'MyComponent',
  render: function() {
    return (
      <ul>
        <li><a href="/">Home</a></li>
        <li><a href="/abc">Draw</a></li>
        <li><a href="/def">Away</a></li>
      </ul>
    )
  }
});

var assert = require('assert');
var sd = require('skin-deep');

var tree = sd.shallowRender(<MyComponent />);

var homeLink = tree.subTree('a', { href: '/' });

assert.equal(homeLink.type, 'a');
assert.equal(homeLink.props.href, '/');
assert.equal(homeLink.text(), 'Home');
```

## Usage

The goal of skin-deep is to provide higher level functionality built on top of the Shallow Rendering test utilities provided by React 0.13+.

By default, shallow rendering gives you a way to see what a component would render without continuing along into rendering its children. This is a very powerful baseline, but in my opinion it isn't enough to create good UI tests. You either have to assert on the whole rendered component, or manually traverse the tree like this:

```js
assert(rendered.props.children[1].props.children[2].children, 'Click Here');
```

By their nature user interfaces change a lot - sometimes these changes are to behaviour, but sometimes they're simply changes to wording or minor display changes. Ideally, we'd want non-brittle UI tests which can survive these superficial changes, but still check that the application behaves as expected.

### Rendering

Use the `shallowRender` function to get a `tree` you can interact with.

```jsx
var sd = require('skin-deep');

var tree = sd.shallowRender(<MyComponent />);
```

You can now inspect the the tree to see its contents

```js
tree.getRenderOutput();
// -> ReactElement, same as normal shallow rendering

tree.type;
// -> The component type of the root element

tree.props;
// -> The props of the root element
```

The real benefits of skin deep come from the ability to extract small portions of the tree with a jQuery-esque API. You can then assert only on these sub-trees.

### Extracting portions of the result

Extraction methods all take a CSS-esque selector as the first argument. This is commonly a component or tag name, but can also be a class or ID selector. The special value '*' can be used to match anything.

The second (optional) argument is the matcher, this can be an object to match against props, or a predicate function which will be passed each node and can decide whether to include it.

```jsx
tree.subTree('Button');
// -> the first Button component
{'fraction_non_alphanumeric': 0.14257382106654914, 'fraction_numerical': 0.0011018069634200088, 'mean_word_length': 4.252893518518518, 'pattern_counts': {'":': 0, '<': 41, '<?xml version=': 0, '>': 49, 'https://': 14, 'lorem ipsum': 0, 'www.': 2, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1803928', 'n_tokens_mistral': 2904, 'n_tokens_neox': 2698, 'n_words': 878}