Question

假设有两个组件，一个是动作调度类，另一个是状态接收类。

Component1有一个方法，该方法调度一个动作来更改props1的redux状态，然后Component2从redux状态接收props1并将其传递给Component3。

Component1和Component2在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>
}

如何通过玩笑和酵素来检验这种逻辑？使用集成测试还是分离单元测试？预先感谢。

Answer 1

您应该分别测试每个组件以进行单元测试。

Component1：：您应该测试一下，当您单击按钮或其他内容时，Component1是否正在调度正确的操作。

Component2：，您应该测试一下，在提供道具时，它的行为是否与众不同。

您可以单独导出Component2进行单元测试。

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

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

如何测试两个Redux相关组件？

1 个答案: