UnHOC

Unwrap + Higher Order Components
Effortlessly Unwrap React HOCs for simple unit testing.

Installation

Npm

npm install @unhoc/core [UnHOC Packages] --save-dev

Yarn

yarn add @unhoc/core [UnHOC Packages] --dev

Motivation

A Higher-Order Component (HOC) is an incredibly popular design pattern within the React ecosystem useful for reusing common component logic. Many popular third-party libraries implement this pattern such as React Redux, React Router, and Material-UI.

A HOC is simply a function that takes one component and returns a new component with enhanced functionality.

export default hoc(WrappedComponent);

When developing components, HOCs are wonderfully simple and extremely powerful, but testing those components can cause many developers headaches as they attempt to circumvent the HOC. Common techniques to do so are:

Manually unwrap third-party HOCs.
Manually mock third-party HOCs.
Manually export the wrapped, and unwrapped version of the component.

All of these solutions are far from perfect and that's where UnHOC comes in!

Getting Started

UnHOC is an extensible utility library for automatically unwrapping each HOC and allowing you to test with the original component.

Import @unhoc/core and any plugins you wish to use. E.g. @unhoc/react

import createUnHOC from '@unhoc/core';
import { unHOCMemo } from '@unhoc/react';

Initialize UnHOC function.

const unhoc = createUnHOC({
  plugins: [unHOCMemo()],
});

Unwrap your React components for testing.

const unwrapped = unhoc(<Component />);

See ./packages/[plugin]/examples for examples on specific UnHOC plugins.

Packages

Plugin	Package	Description
Core	`@unhoc/core`	The core functionality of UnHOC, configures and runs plugins that unwrap HOCs.
React↗︎	`@unhoc/react`	Unwraps HOCs built into `react` E.g. `React.memo`.
React Redux↗︎	`@unhoc/react-redux`	Unwraps HOCs from `react-redux` E.g. `connect`.
Material UI↗︎	`@unhoc/material-ui`	Unwraps HOCs from `@material-ui` E.g. `withStyles`.

Development

These instructions will get you a copy of the project up and running on your local machine for development and testing purposes.

Prerequisites

We use Yarn package manager for development so please ensure you have yarn installed globally.

npm install yarn --global

Clone this repository

git clone git@github.com:cassels/UnHOC.git

Dev Environment

Install Dependencies via Yarn

yarn

Unit Tests

Run tests with Yarn

yarn test

Prettier & Linter

To format and lint code with Prettier and TSLint

yarn lint

Roadmap

Core

Implement Core
Unit Testing
Improve Efficiency

Plugins

react memo
react-redux connect
@material-ui/styles withStyles
react-router withRouter

Integrations

enzyme

TODOs

Versioning

We use SemVer for versioning. For the versions available, see the tags on this repository.

Contributors

Graeme Cassels - Initial work - cassels

Contributing

We are actively encouraging contributions from the community – see CONTRIBUTING.md and CODE_OF_CONDUCT.md for details of our PR process and code of conduct.

License

This project is licensed under the MIT License – see the LICENSE file for details.