Skin-Deep React Testing Utilities

Common errors

• TypeError: tree.subTreeLike is not a function

  cause Attempting to use the old `subTreeLike` method after upgrading to `skin-deep` v1.0 or later.
  fix Rename `subTreeLike` to `subTree` in your test code: `tree.subTree(...)`.

• TypeError: Cannot read properties of undefined (reading 'textIn')

  cause Using the deprecated `textIn` method which was removed in `skin-deep` v1.0.
  fix Use `subTree().text()` instead: `tree.subTree('.some-selector').text()`.

• Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

  cause This error can occur when using `skin-deep` with modern React if `createClass` components are mixed with functional or class components, or if the React version is too new for the `react-test-renderer` version being used implicitly by `skin-deep`.
  fix Ensure you are using `skin-deep` with a compatible React version (<= React 16 is generally safer). For modern React (17+), consider migrating to `@testing-library/react` which is actively maintained and designed for current React APIs.

Warnings

• breaking React 0.13 is no longer supported since Skin-Deep v1.0. If you are using an older React version, you must remain on Skin-Deep < 1.0.
  Fix: Upgrade React to 0.14 or newer, or downgrade `skin-deep` to a compatible version (e.g., 0.x).
• breaking The `subTreeLike` and `everySubTreeLike` methods were renamed to `subTree` and `everySubTree` respectively in Skin-Deep v1.0.
  Fix: Update method calls from `subTreeLike` to `subTree` and `everySubTreeLike` to `everySubTree`.
• breaking Several methods including `findNode`, `textIn`, `fillField`, `findComponent`, and `findComponentLike` were removed in Skin-Deep v1.0.
  Fix: Replace `findNode`, `findComponent`, `findComponentLike` with `subTree()`. Use `subTree().text()` instead of `textIn()`. For `fillField`, directly use `subTree().props.onChange`.
• breaking The `toString()` method's output changed significantly in v1.0, moving from HTML string rendering to a pretty-printed representation of the render result.
  Fix: Review any tests asserting on the `toString()` output and update expectations to match the new pretty-printed format. If HTML rendering is strictly required, explore alternative React testing utilities.
• breaking The `reRender()` method now accepts `props` as its argument instead of a full `ReactElement`.
  Fix: Adjust calls to `reRender()` to pass only the props object, e.g., `tree.reRender({ newProp: 'value' })` instead of `tree.reRender(<MyComponent newProp='value' />)`.
• gotcha Skin-Deep's development has been inactive for several years (last published 8 years ago as of 2026), making it incompatible with modern React versions like React 18+ and their concurrent rendering features. Using it with recent React versions will likely lead to unexpected behavior or errors.
  Fix: Consider migrating to actively maintained React testing libraries such as `@testing-library/react` or Enzyme (though Enzyme itself is seeing less active development compared to React Testing Library), which offer better support for modern React features and APIs.

Install

• npm install skin-deep npm
• yarn add skin-deep yarn
• pnpm add skin-deep pnpm

Imports

• shallowRender
  wrong:

  const shallowRender = require('skin-deep').shallowRender;

  correct:

  import { shallowRender } from 'skin-deep'; // Or import * as sd from 'skin-deep'; sd.shallowRender(...)

  The primary `shallowRender` function is exposed as a named export. The CommonJS usage `var sd = require('skin-deep'); var tree = sd.shallowRender(...);` implies `shallowRender` is a property of the main module object.
• exact
  wrong:

  const exact = require('skin-deep').exact;

  correct:

  import { exact } from 'skin-deep';

  Utility function for creating exact prop matchers in `subTree` or `everySubTree`.
• hasClass
  wrong:

  const hasClass = require('skin-deep').hasClass;

  correct:

  import { hasClass } from 'skin-deep';

  Helper function for checking CSS classes on a rendered node.

Quickstart

This quickstart demonstrates how to shallow render a React component using `skin-deep`, then extract a specific sub-tree based on a selector and prop matcher, and finally perform assertions on its type, props, and text content.

import React from 'react';
import * as sd from 'skin-deep';
import assert from 'assert';

// Define a simple React component
class MyComponent extends React.Component {
  render() {
    return (
      <ul>
        <li><a href="/">Home</a></li>
        <li><a href="/abc">Draw</a></li>
        <li><a href="/def">Away</a></li>
      </ul>
    );
  }
}

// Shallow render the component
const tree = sd.shallowRender(<MyComponent />);

// Find a specific sub-tree using a selector and matcher
const homeLink = tree.subTree('a', { href: '/' });

// Assertions on the extracted sub-tree
assert.equal(homeLink.type, 'a');
assert.equal(homeLink.props.href, '/');
assert.equal(homeLink.text(), 'Home');

console.log('Shallow rendering and assertions successful!');