{"id":15379,"library":"skin-deep","title":"Skin-Deep React Testing Utilities","description":"Skin-Deep provides testing helpers built on top of React's shallow rendering test utilities. Its primary goal is to offer higher-level functionality for unit testing React components, allowing developers to assert on a component's rendered output without fully mounting it or its children. The current stable version is 1.2.0. This library was designed to work with React versions 0.14 and above, requiring specific React testing utility packages depending on the React version (e.g., `react-addons-test-utils` for <15.5 or `react-test-renderer` for >=15.5). Skin-Deep offers methods to extract portions of the rendered tree, trigger events, and dive into sub-trees, providing a structured way to interact with a shallow-rendered component's virtual DOM. Its release cadence is effectively inactive, with the last update several years ago, making it unsuitable for modern React applications (React 18+).","status":"abandoned","version":"1.2.0","language":"javascript","source_language":"en","source_url":"https://github.com/glenjamin/skin-deep","tags":["javascript","react","reactjs","test","testing","test utils","assertion helpers","shallow render","shallowRender","typescript"],"install":[{"cmd":"npm install skin-deep","lang":"bash","label":"npm"},{"cmd":"yarn add skin-deep","lang":"bash","label":"yarn"},{"cmd":"pnpm add skin-deep","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Core React library required for component definition and rendering.","package":"react","optional":false},{"reason":"Required for React < 15.5 to provide shallow rendering capabilities.","package":"react-addons-test-utils","optional":true},{"reason":"Required for React >= 15.5, though the shallow rendering is handled by react-test-renderer.","package":"react-dom","optional":true},{"reason":"Required for React >= 15.5 to provide shallow rendering capabilities.","package":"react-test-renderer","optional":true}],"imports":[{"note":"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.","wrong":"const shallowRender = require('skin-deep').shallowRender;","symbol":"shallowRender","correct":"import { shallowRender } from 'skin-deep'; // Or import * as sd from 'skin-deep'; sd.shallowRender(...)"},{"note":"Utility function for creating exact prop matchers in `subTree` or `everySubTree`.","wrong":"const exact = require('skin-deep').exact;","symbol":"exact","correct":"import { exact } from 'skin-deep';"},{"note":"Helper function for checking CSS classes on a rendered node.","wrong":"const hasClass = require('skin-deep').hasClass;","symbol":"hasClass","correct":"import { hasClass } from 'skin-deep';"}],"quickstart":{"code":"import React from 'react';\nimport * as sd from 'skin-deep';\nimport assert from 'assert';\n\n// Define a simple React component\nclass MyComponent extends React.Component {\n  render() {\n    return (\n      <ul>\n        <li><a href=\"/\">Home</a></li>\n        <li><a href=\"/abc\">Draw</a></li>\n        <li><a href=\"/def\">Away</a></li>\n      </ul>\n    );\n  }\n}\n\n// Shallow render the component\nconst tree = sd.shallowRender(<MyComponent />);\n\n// Find a specific sub-tree using a selector and matcher\nconst homeLink = tree.subTree('a', { href: '/' });\n\n// Assertions on the extracted sub-tree\nassert.equal(homeLink.type, 'a');\nassert.equal(homeLink.props.href, '/');\nassert.equal(homeLink.text(), 'Home');\n\nconsole.log('Shallow rendering and assertions successful!');","lang":"typescript","description":"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."},"warnings":[{"fix":"Upgrade React to 0.14 or newer, or downgrade `skin-deep` to a compatible version (e.g., 0.x).","message":"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.","severity":"breaking","affected_versions":">=1.0.0"},{"fix":"Update method calls from `subTreeLike` to `subTree` and `everySubTreeLike` to `everySubTree`.","message":"The `subTreeLike` and `everySubTreeLike` methods were renamed to `subTree` and `everySubTree` respectively in Skin-Deep v1.0.","severity":"breaking","affected_versions":">=1.0.0"},{"fix":"Replace `findNode`, `findComponent`, `findComponentLike` with `subTree()`. Use `subTree().text()` instead of `textIn()`. For `fillField`, directly use `subTree().props.onChange`.","message":"Several methods including `findNode`, `textIn`, `fillField`, `findComponent`, and `findComponentLike` were removed in Skin-Deep v1.0.","severity":"breaking","affected_versions":">=1.0.0"},{"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.","message":"The `toString()` method's output changed significantly in v1.0, moving from HTML string rendering to a pretty-printed representation of the render result.","severity":"breaking","affected_versions":">=1.0.0"},{"fix":"Adjust calls to `reRender()` to pass only the props object, e.g., `tree.reRender({ newProp: 'value' })` instead of `tree.reRender(<MyComponent newProp='value' />)`.","message":"The `reRender()` method now accepts `props` as its argument instead of a full `ReactElement`.","severity":"breaking","affected_versions":">=1.0.0"},{"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.","message":"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.","severity":"gotcha","affected_versions":">=1.2.0 (effectively, any React > 16)"}],"env_vars":null,"last_verified":"2026-04-21T00:00:00.000Z","next_check":"2026-07-20T00:00:00.000Z","problems":[{"fix":"Rename `subTreeLike` to `subTree` in your test code: `tree.subTree(...)`.","cause":"Attempting to use the old `subTreeLike` method after upgrading to `skin-deep` v1.0 or later.","error":"TypeError: tree.subTreeLike is not a function"},{"fix":"Use `subTree().text()` instead: `tree.subTree('.some-selector').text()`.","cause":"Using the deprecated `textIn` method which was removed in `skin-deep` v1.0.","error":"TypeError: Cannot read properties of undefined (reading 'textIn')"},{"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.","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`.","error":"Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object."}],"ecosystem":"npm"}