Redux & Snapshot Testing

Redux and Snapshot testing

How To Run

To test the current Redux and Snapshot tests, navigate to WediumFrontend and run the command: npm test

Redux Testing

In order to perform Redux testing, we used the Jest framework. Essentially, the team used createStore() before each test to ensure a consistent state. After ensuring that the state of the store was consistent we dispatched actions and then proceeded to test that the store was being updated correctly using the expect() and getState() statements. Please note as a means to ensure the consistent state of the store we highly encourage the use of the beforeEach() method where one simply re-initializes the store, i.e. store = createStore(rootReducer);

Snapshot and Shallow Testing

Please note that we tried to perform Snapshot testing where possible. Although due to the complexity of our components and most of them being wrapped with withRouter() made it so in some cases we proceeded to have shallow testing. Shallow testing ensures that the component is being rendered correctly, without having to worry about the details of any of the child components. Furthermore, Snapshot testing was done to track any changes to code that might have been unintentional. The basic format from Snapshot tests are as follows :

Traditional Snapshot Testing

it(‘snapshot with no content’, () => ){
    const tree = renderer.create(<ComponentName />).toJson();
    expect(tree).toMatchSnapshot(); 
}

Testing of components wrapped with withRouter()

const setRouteLeaveHook = jest.fn();

  let wrapper = shallow(
    <{Complex component}.WrappedComponent
      params={{
        router: setRouteLeaveHook,
      }}
    />
  );

  expect(wrapper).toMatchSnapshot();