react-mock-hoc-utils v1.0.1

React Mock HOC Utilities

This package of Higher-Order-Component utilities contain the following:

• Mocking Higher Order Components
• Diving Through Shallow Components

This library mixes well with the test-component-builder, to allow for easy to setup tests

Mock Hoc

A Higher-Order-Component mocking tool that allows for mocking any component that is wrapped by one or more HOCs - additionally, supporting prop injection on a per-hoc-basis. Is built for React and Jest.

To install run npm install react-mock-hoc-utils

The control of this tool goes through a single function called constructMockHoc. This function returns a MockHoc object, that is used to construct a mocked higher-order-component enviroment around a component. It functions just like a regular hoc mock, using jest.doMock, passing in the paths and injected props and finally does a require of the wrapped component. Only it handles all of this behind the scenes, and structures it in a much nicer, and automated format.

Here is an example of a component that is wrapped by 3 different higher order components - where 2 of them inject props into the component, and 1 does not:

import constructMockHoc from "react-mock-hoc-utils";

const MyWrappedComponent = constructMockHoc("../MyWrappedComponent.js")
  .mock("../HigherOrderComponent__1.js")
  .with({ hoc1: "bob" })

  .mock("../HigherOrderComponent__2.js")

  .mock("../HigherOrderComponent__3.js")
  .with({ anotherProp: "flower" })

  .create();

const mockedWrappedComponent = shallow(<MyWrappedComponent />)
  .dive()
  .dive()
  .dive();

Would result in getting your wrapped component, with the injected props: {hoc1: "bob", anotherProp: "flower"}

There is a lot going on here, so here is a break down of the MockHoc object and all of its functions.

Description

The object uses a chained method design. Where the functions return the object, allowing for chaining multiple calls, as shown in the example above

constructMockHoc

const MyWrappedComponent = constructMockHoc("../MyWrappedComponent.js", __dirname, false);

As mentioned this function simply creates a new MockHoc object - the parameters it takes, is as follows:

• The reason it is usually relative to the file, is because as shown, you can pass in your own starting point (origin), but if you do not pass in an origin; then the object will automatically attempt to figure out the origin based on what file called the constructMockHoc function.

mock

constructMockHoc(/*...*/).mock(
  "../HigherOrderComponent.js",
  "#uc",
  (path, method) => jest.doMock(path, () => method))
);

with

The with functions relative to the last mock. So if you call an mock followed by a with, then the props passed into that with will be injected into the wrapped component through that mock. Generally, you just need to remember that if you desire to mock a HOC, and that HOC injects props into the wrapped component, then you do one mock specificing the HOC, followed by a with, specifying what props that HOC should inject.

Additionally, you can nest with's, and it will just merge the the props and add them to the last mock. There is no use for this behaviour, but it exists as a by-product of the chained function design.

/*...*/.mock(/*...*/).with({injectedProp: "MUAHAHA"})

create

The create method is the only thing that does not return itself, but instead, it returns the desired export of the WrappedComponent file path. Because of that, this is the method you call when you have nothing left to chain, and it is ready to formulate the mocked Wrapped Component

/*...*/.mock(/*...*/).create("default");

createPure

The createPure is a simplified version of the regular create function, where it mocks the component and does a simple require. Whereas, create, does the same, only it also auto extracts the export method of your choice from the required file

/*...*/.mock(/*...*/).createPure();

This may be desirable, if the mocked component does not contain a default export, or any other export object for that matter.

Diving Utilities

There are multiple shallow diving methods available in this utility - they are as follows:

Each of one of them take in a shallow component as their first parameter. Meaning that for it to function, you have to pass in a shallow object by Enzyme. The reason for it is because of the diving method inside the shallow object. Each one returns a shallow object back in respect to the amount of dives it did.

diveThroughComponents(shallow(<MyComponent />), [View, Text]);

diveThroughComponent(shallow(<MyComponent />), View);

diveStaticAmount(shallow(<MyComponent />), 3);

diveSingleToComponent(shallow(<MyComponent />), "MySwimSuitComponent");

diveThroughMockHocs(shallow(<MyComponent />));

Will attempt to dive through each of the mocked higher order components that wrap MyComponent.

diveSingleToComponent and diveThroughMockHocs both have a max dive depth, of 50 by default. This can be altered by changing the value of the static property MAX_DIVES