integration tests for react redux redux-saga

Question

I have a project structure like this:

app/
  global/
    styles/
    components/
  scenes/
    Home/
      actions.js
      constants.js
      index.jsx
      reducer.js
      sagas.js
      styles.styl
      index.spec.jsx
    some-other-scene/
      actions.js
      constants.js
      index.jsx
      reducer.js
      sagas.js
      styles.styl
      index.spec.jsx

so I have no problem with unit test with this structure, but I'm pretty confused as to how to structure integration test. For my unit tests I am exporting each scene component as a class

export class SomeComponent extends Component {}

and as a redux connected component

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(SomeComponent)

So for the fist style of export (the class) I am unit testing it, but for the second way (the connected component way) I am unsure how to approach this specifically how to do integration testing in react/redux. I've searched the internet about this, but nothing that is close to this structure.

So:

1. is integration testing in react/redux/middleware (in this case redux saga) how one component integrates with redux and middleware.
2. Or is it about how the whole app works with all the components mounted?
3. if it's #1 does that mean each component should have a single integration test file that tests how the component integrates with redux and middleware or if it's #2 then is it one test file that tests all components as one app?

also, if it's #1 then how should I test routes via react router?

Answer 1

In the case of your example, what we do is export mapStateToProps and mapDispatchToProps and we write unit tests for those (when they are not trivial).

I suppose you already unit test your action creators, sagas and reducers on their own.

What's left as far as integration goes? You might want to mount the components in the context of a real store, to see if they react correctly to mutations of the redux store and whether they dispatch the correct actions or not. In my project, we use end-to-end browser automation tests to verify things like this.