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:

1. Manually unwrap third-party HOCs.
2. Manually mock third-party HOCs.
3. 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.

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

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

2. Initialize UnHOC function.

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

3. Unwrap your React components for testing.

const unwrapped = unhoc(<Component />);

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

Packages

Plugin	Package	Description	Version
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

• Documentation
  • Motivation
  • Installation
  • Getting Started
  • Developing a Plugin
• Development
  • Add LICENSE
  • CONTRIBUTING
  • CODE_OF_CONDUCT
  • Add Git Hooks
  • Add CI
  • Add CD

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.