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

@unhoc/core is the bedrock of the UnHOC ecosystem – see UnHOC for more information.

Installation

Npm

npm install @unhoc/core --save-dev

Yarn

yarn add @unhoc/core --dev

Usage

@unhoc/core is designed to be used in conjunction with UnHOC plugins.

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

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 />);

Example

We'll use the following React component as the component we wish to test. It's a very simple component that renders "Hello, [name]" where name is a prop passed in.

The component is then memoized by wrapping the component in the React.memo method before exporting.

// Component.js
import * as React from 'react';

const Component = props => <div>Hello, {props.name}!</div>;

export default React.memo(Component);

If we were to shallow render this component in a unit test we would actually be rendering the memoized function and not the component itself.

Instead of trying to unwrap the component ourself, we can UnHOC the memoized function resulting in our unwrapped Component.

// Component.spec.js
import * as React from 'react';
import { shallow } from 'enzyme';
import createUnHOC from '@unhoc/core';
import { unHOCMemo } from '@unhoc/react';

import Component './component';

// Create UnHOC function
const unhoc = createUnHOC({
  plugins: [
    unHOCMemo()
  ],
});

// Now we can unwrap our component like unhoc(<Component />); e.g.

test('Hello, UnHOC', () => {
  const wrapper = Enzyme.shallow(unhoc(<Component name="UnHOC" />));
  expect(wrapper.text()).toBe('Hello, UnHOC!');
});

While this is a very simple example, the true power of UnHOC comes when you have a Component that is wrapped in multiple HOCs.

// ComplexComponent.js

export default connect(
  mapState,
  mapDispatch
)(withStyles(styles)(Component));

There is no need to worry about what to unwrap first because UnHOC takes care of it all for you :+1:

See examples for full test files.

API

createUnHOC(config)

Configures an UnHOC function to be used in unit tests.

| Params | Type | | ------ | --------------------------- | | config | UnHOCConfig |

returns: UnHOCNext

UnHOCConfig

interface UnHOCConfig {
  plugins: UnHOCPlugin[];
}

An object consisting of one property, plugins, which is an array of UnHOC plugins.

UnHOCNext

type UnHOCNext = (node: React.ReactElement<any>) => React.ReactElement<any>;

A function that takes one React component as a parameter and returns another React component. The returning component may be the same component as the parameter or an unwrapped version.

Development

This package is developed as part of the UnHOC project. See UnHOC Development for details.

Versioning

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

License

This package is part of the UnHOC project and is therefore licensed under the MIT License – see the project LICENSE file for details.