How to test two redux related components?

Question

Suppose there are two components, one is action dispatching class, other one is a state receiving class.

Component1 has a method dispatch a action to change props1 redux state, then Component2 receives the props1 from redux state passing it to Component3.

Component1 and Component2 are combined under SuperComponent.

// Component1.js
class Component1 extends React.component {
  method1 = () => {
    this.props.action1({ props1: something });
  }
  render() {
    return (
      ...
    )
  }
}

export default connect(
  state => ({ ... }),
  {action1}
)(Component1)


// Component2.js
class Component2 extends React.component {
  render() {
    return (
      <Component3 props1={this.props.props1} />
    )
  }
}

export default connect(
  state => ({ props1: state.reducer1.props1 }),
  {}
)(Component2)

const Component3 = ({ props1 }) => (
  <div props1={props1} >
    ...
  </div>
)


// SuperComponent
const SuperComponent = () => {
  <div>
    <Component1>
    <Component2>
  </div>
}

How to test this logic by jest and enzyme? Using integrate testing or separated unit testing? Thanks in advance.

Anas Anas · Accepted Answer · 2018-08-09T15:22:06

You should test each component separately for unit testing.

Component1: You should test that when you click a button or something, that Component1 is dispatching the right action.

Component2:, you should test that when you provide the props, it behaves as excepted.

You can export the Component2 separately to unit test it.

// Component2.js
export class Component2 extends React.component {
  render() {
    return (
      <Component3 props1={this.props.props1} />
    )
  }
}

export default connect(
  state => ({ props1: state.reducer1.props1 }),
  {}
)(Component2)

How to test two redux related components?

1 Answers