我正在为在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的更新。我正在使用jest
,enzyme
进行测试
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 };
};
但是视图永远不会更新。触发操作并更新视图后,是否可以验证视图?