React Redux,为ajax请求编写单元测试

时间:2018-10-01 10:19:17

标签: reactjs react-redux jestjs enzyme

我正在为在componentDidMount()中触发ajax请求的组件编写测试用例。在完成请求后,我触发了一个redux动作来更新状态(使用道具更新UI)。

componentDidMount() {
    this.props.requestCurrenciesWithRates();
    return axios
      .post(this.props.serverUrl + `/api`, {
        action: 'GET_CURRENCIES_WITH_RATES',
        data: {},
        meta: {}
      })
      .then(res => {
        let { accountCurrencies, currencyRates } = res.data.payload;
        // redux action
        this.props.receiveCurrenciesWithRates(accountCurrencies, currencyRates);
      })
      .catch(error => {
        // handle error
        // redux action 
        this.props.appError(error.message);
      });
  }

我想编写一个单元测试来测试ui的更新。我正在使用jestenzyme进行测试

const apiSetup = () => {
  const {wrapper, store} = providers(<Component />)
  const page = mount(wrapper);
  // I am mocking the api using jest.mock 
  const apiPromise = axios
    .post(`/api`, {
      action: 'GET_CURRENCIES_WITH_RATES',
      data: {},
      meta: {}
    })
    .then(res => {
       chai
            .expect(
              page.find('TopUpCurrencies').find('.tcm-available-currency-tab')
            )
            .to.have.lengthOf(2);
          chai
            .expect(page.find('TopUpCurrencies').find('.tcm-currency-rate-tab'))
            .to.have.lengthOf(8);
    });

  return { page, apiPromise };
};

但是视图永远不会更新。触发操作并更新视图后,是否可以验证视图?

0 个答案:

没有答案