Redux: How to test a connected component?

Question

I am using Enzyme to unit test my React components. I understand that in order to test the raw unconnected component I\'d have to just export it and test it (I\

Answer 1

As you pointed out, the way I usually do this is to export the un-connected component as well, and test that.

i.e.

export {Login};

Here's an example. Source of the component, and source of the tests.

For the wrapped component, I don't author tests for those because my mappings (mapStateToProps and mapDispatchToProps) are generally very simple. If I wanted to test a wrapped component, I'd really just be testing those maps. So those are what I would choose to explicitly test, rather than re-testing the entire component in a wrapped form.

There are two ways to test those functions. One way would be to export the functions within the module itself.

i.e.;

export {mapStateToProps, mapDispatchToProps}

I'm not a huge fan of this, because I wouldn't want other modules in the app to access them. In my tests, I sometimes use babel-plugin-rewire to access "in-scope" variables, so that's what I would do in this situation.

That might look something like:

import {
  Login, __Rewire__
}

const mapStateToProps = __Rewire__.__get__('mapStateToProps');

describe('mapStateToProps', () => { ... });