Question

试图熟悉Jest，我在以下问题上有些困惑。

我有一个如下组件；

import { populateBrands } from '../../actions/brand/BrandActions';


export class CampaignForm extends Component {

  constructor(props) {
    super(props);

    this.state = {
      name: null,
      type: 'a-type',
      brand: null
    };
  }

  componentWillMount() {
    this.props.populateBrands({
      payload: {
        filter: {
          organisation: null,
          archived: false
        },
        pageNum: 0
      }
    });

    if (this.props.campaign) {
      const {
        name,
        type,
        brand
      } = this.props.campaign;

      this.setState({
        name,
        type,
        brand: brand.id,
      });
    }
  }


  render() {
   // Render the Form
  }
}

function mapStateToProps(state) {
  let brands = Selectors.getAllActiveBrands(state);
  return {
    brands
  };
}

const mapDispatchToProps = {
  populateBrands
};

export default withRouter(
  connect(
    mapStateToProps,
    mapDispatchToProps
)(CampaignForm));

我想测试渲染中的某些内容，有时禁用下拉菜单，有时不启用下拉菜单，具体取决于populateBrands函数返回的品牌并设置为状态。

测试类似内容的最佳方法是什么？

到目前为止，我有这个：

it('should display warning', () => {
  const component = shallow(
    <CampaignForm
      processMessage='edit'
      handleSubmit={mockHandleSubmit}
      submitButtonLabel='edit'
      location={'blah'}
      populateBrands={mockPopulateBrands} // mock the function
      brands={fixtureBrands} // pass in the fixture brand data
    />, { context, childContextTypes }
  );

    // do my tests here

});

这是最好的方法吗？我觉得最好能模拟populateBrands函数并返回所需的值，而不是执行当前的操作。

很高兴听到这种情况下的最佳做法

如何在连接的组件React中模拟动作

0 个答案: