TypeScript tests for the Redux HOC

withPersonalization2.test.tsx

import * as React from "react";
import {shallow, mount} from "enzyme";
import configureStore from "redux-mock-store";
import withPersonalization from "./withPersonalization2";
import {IWithPersonalizationProps} from "./withPersonalization2";
import {Provider} from "react-redux";

// test helpers
const middlewares = [];
const mockStore = configureStore(middlewares);

class TestPersonalizedComponent extends React.Component<IWithPersonalizationProps, {}> {
    public render(): JSX.Element {
        return (<div>HELLO, {this.props.name}</div>);
    }
}

const TestPersonalizedSFC = ({name}) => (<div>GOODBYE, {name}</div>);

export const withMockedStore = (initialState, wrappedComponent) => {
    return mount(
        <Provider store={mockStore(initialState)}>
            {React.createElement(wrappedComponent)}
        </Provider>
    );
};
// end test helpers

describe("withPersonalization", () => {

    describe("when logged in", () => {

        const loggedInState = { user: {name: "Test User"} };

        it("injects the personalization into the wrapped component", () => {
            let wrapper = withMockedStore(loggedInState, withPersonalization(TestPersonalizedComponent));
            expect(wrapper.text()).toContain(`HELLO, ${loggedInState.user.name}`);
        });

        it("injects the personalization into the wrapped stateless function component", () => {
            let wrapper = withMockedStore(loggedInState, withPersonalization(TestPersonalizedSFC));
            expect(wrapper.text()).toContain(`GOODBYE, ${loggedInState.user.name}`);
        });
    });

    describe("when logged out", () => {

        const loggedOutState = {};

        it("does not render a wrapped component", () => {
            let wrapper = withMockedStore(loggedOutState, withPersonalization(TestPersonalizedComponent));
            // expect(wrapper.type()).to.equal(null); // seems like that should work but doesn't....
            expect(wrapper.html()).toEqual(null);
        });

        it("does not render wrapped stateless function component", () => {
            let wrapper = withMockedStore(loggedOutState, withPersonalization(TestPersonalizedSFC));
            expect(wrapper.html()).toEqual(null);
        });
    });

});