/* Import Redux Provider */
import { ReduxProvider } from 'redux-react-hooks';
import { userReducer } from '../myReducers/userReducer';
 
/* create your store */
const store = createStore(userReducer);
 
function App() {
    return (
        {/* pass your store to the provider and wrap your component with ReduxProvider */
        <ReduxProvider store={store}>
            <SomeComponent />
        </ReduxProvider>
    );
}

/* Import Redux React hooks */
import { useReduxState, useReduxActions } from 'redux-react-hooks';
import { createUser } from '../myActions/userActions';
 
function SomeComponent() {
    /* Allows us to access our state */
    const { users } = useReduxState(state => ({
       users: state.User.users
    }));
 
    /* binds our actions */
    const actions = useReduxActions({
        createUser
    });
 
    actions.createUser('Gareth');
    ...
}

/* import mockReduxStore */
import { mockReduxStore } from 'redux-react-hooks';
import renderer from 'react-test-renderer'
import { userReducer } from '../myReducers/userReducer';
 
describe('SomeComponent', () => {
    it('will create user', () => {
        /* create a mock store from a store */
        const mockStore = mockReduxStore.createStore(createStore(useReducer));
 
        /* Run tests */
        const component = renderer.create(<SomeComponent />);
 
        /* Finds a text input with the id username */
        const usernameInput = component.root.find(el => el.props.id === 'username');
        /* Finds a button with the id create-user
        const button = component.root.find(el => el.props.id === 'create-user');
 
        /** calls onChange event to set username field */
        usernameInput.props.onChange({
            target: {
                value: 'Gareth'
            }
        });
 
        /** calls the create user action */
        button.props.onClick();
 
        /* Re-render component */
        component.update(<SomeComponent />);
 
 
        /* Find a user with the name Gareth
        const usernameListItem = component.root.find(el => {
            return el.props.children === "Gareth";
        });
 
        /* assert we successfully dispatched an action and our state was update */
        expect(usernameListItem.props.children).toContain("Gareth");
 
        /* teardown mock store */
        mockStore.teardown();
    });
});