react-unit-testing-utils is a module with a set of useful functions to test react containers and components.
yarn add https://github.com/HealthByRo/react-unit-testing-utils
createComponentWithIntl creates component with initial state and wrapped in Intl and redux providers and return object with wrapped component and store.
importReactfrom'react';import{createComponentWithIntl}from'react-unit-testing-utils';importSignInFormfrom'./';describe('<SignInForm />',()=>{it('should render SignInForm',()=>{constinitialState={};const{ component, store }=createComponentWithIntl(<SignInForm/>,initialState);expect(component.toJSON()).toMatchSnapshot();});});shallowWithIntl creates ShallowWrapper using shallow function from enzyme additionaly adding Intl context to renders component with Intl.
mountWithIntl creates ReactWrapper using mount function from enzyme additionaly adding Intl context to renders component with Intl.
Test snapshot of container with Intl, react-router and connected with redux
If your container requires some props which are passed down from react-router, you should use createComponentWithRouter function to put your component inside and components.
createComponentWithRouter returns object with wrapped component, store and react-router history object:
...
const{ wrapper, history, store }=createComponentWithRouter(<SignInPage/>,initialState)console.log(store.getActions());console.log(store.getState());history.push('/');expect(wrapper.toJSON()).toMatchSnapshot();
...By default your container is added to route under url a /test-page and the url is opened automatically: <Route path="/test-page" component={YourContainer} />.
If you want to define your own routes you need to use createTestWithRoutes(routes, initialState) and open url explicit:
importReactfrom'react';import{createTestWithRoutes}from'react-unit-testing-utils';importSignInPagefrom'./index';describe('<SignInPage />',()=>{it('should NOT render SignInPage when user IS authenticated',()=>{constinitialState={auth: {isAuthenticated: true,user: {id: 1,firstName: 'John',email: 'john@smith.com',},},};constApp=(props)=>(<main>{props.children}</main>);App.propTypes={children: PropTypes.node,};constroutes=(<Routecomponent={App}><Routepath="/sign-in"component={SignInPage}/></Route>);const{ wrapper, history }=createTestWithRoutes(routes,initialState);history.push('/sign-in');expect(wrapper.toJSON()).toMatchSnapshot();});});Usually, you should use it to test snapshot of page container which is wrapped in some redux-auth-wrapper eq. UserIsAuthenticated.
Note: If redux-auth-wrapper doesn't allow to render page container it will return node only with <main /> markup. What means that user has no access to view the container based on initialState and auth wrapper.
importReactfrom'react';import{createComponentWithRouter}from'react-unit-testing-utils';importSignInPagefrom'./index';describe('<SignInPage />',()=>{it('should NOT render SignInPage when user IS authenticated',()=>{constinitialState={auth: {isAuthenticated: true,user: {id: 1,firstName: 'John',email: 'john@smith.com',},},};const{ wrapper }=createComponentWithRouter(<SignInPage/>,initialState);expect(wrapper.toJSON()).toMatchSnapshot();});});importReactfrom'react';import{createComponentWithRouter}from'react-unit-testing-utils';importSignInPagefrom'./index';describe('<SignInPage />',()=>{it('should render SignInPage when user IS NOT authenticated',()=>{constinitialState={auth: {isAuthenticated: false,},signInPage: {},};const{ wrapper }=createComponentWithRouter(<SignInPage/>,initialState);expect(wrapper.toJSON()).toMatchSnapshot();});});createComponentWithRouter returns wrapped component and store with additional function getActions which returns list of occurred actions.
importReactfrom'react';import{findActionByType,createComponentWithRouter,}from'react-unit-testing-utils';importSignInPagefrom'./index';import{destroyPageAction}from'./actions';import{DESTROY_PAGE_ACTION}from'./constants';describe('<SignInPage />',()=>{it('should dispatch action DESTROY_PAGE_ACTION when the component unmount',()=>{constinitialState={auth: {isAuthenticated: false,},signInPage: {},};const{ wrapper, store }=createComponentWithRouter(<SignInPage/>,initialState);wrapper.unmount();constrecivedAction=findActionByType(store,DESTROY_PAGE_ACTION);expect(recivedAction).toEqual(destroyPageAction());});});shallowWithStore creates ShallowWrapper using shallow function from enzyme additionaly adding redux store context.
importReactfrom'react';import{shallowWithStore}from'react-unit-testing-utils';importShippingAddressFormfrom'./';describe('ShippingAddressForm',()=>{constinitialValues={name: 'John Doe',lastName: 'Doe',street: '228 Broadway',city: 'New York',state: 'NY',zip: '10003',};it('should render form',()=>{consthandleSubmit=jest.fn();constwrapper=shallowWithStore(<ShippingAddressForminitialValues={initialValues}handleSubmit={handleSubmit}/>,{});expect(wrapper.find('form')).toMatchSnapshot();});});mountWithStore creates ReactWrapper using mount function from enzyme additionaly adding redux store context.
importReactfrom'react';import{mountWithStore}from'react-unit-testing-utils';importShippingAddressFormfrom'./';describe('ShippingAddressForm',()=>{constinitialValues={name: 'John Doe',lastName: 'Doe',street: '228 Broadway',city: 'New York',state: 'NY',zip: '10003',};it('should invoke handleSubmit function when submiting the form',()=>{consthandleSubmit=jest.fn();constwrapper=mountWithStore(<ShippingAddressForminitialValues={initialValues}handleSubmit={handleSubmit}/>,{});wrapper.find('form').simulate('submit');expect(handleSubmit).toBeCalled();});});configureStore creates store wit initial state and given reducers and middlewares. It returns real redux store which contains additional method getActions() which returns list of occurred actions.
importReactfrom'react';import{configureStore}from'react-unit-testing-utils';constinitalState={auth: {isAuthenticated: false,},};conststore=configureStore(initalState);