I've mocked a custom XHR wrapper that I've written (utils/xhr.js) using Jest manual mocking feature and the issue that I'm having is that only the first XHR call is tracked:
let xhr = {
get: function(params) { /* XHR get implementation */ }
post: function(params) { /* XHR post implementation */ }
};
export default xhr;
let xhr = jest.genMockFromModule('./../xhr');
module.exports = xhr;
// ...
getTrendingEntities: (days, maxItems) => {
return xhr.get({url: '/api/aggregator/riskEntities/' + days + '/' + maxItems})
.then((response) => {
companyIds = parseCompanies(response.body);
return xhr.post({
url: '/api/entities/specific-companies',
data: companyIds
});
}).then((response) => {
let companies = parseCompaniesData(response.body);
return Promise.resolve(companies);
});
}
// ...
class TrendingEntitiesPod extends React.Component {
// ...
componentWillMount() {
this.loadData(this.props.days)
}
componentWillReceiveProps(nextProps) {
if (this.props.days != nextProps.days) {
this.loadData(nextProps.days);
}
}
loadData(days) {
this.setState({loading: true});
api.getTrendingEntities(days, DASHBOARD_PODS_ENTRIES_NUMBER)
.then((companies) => {
this.setState({
companies: companies,
loading: false
});
});
}
render() { // ... }
}
import React from 'react';
import { mount } from 'enzyme';
import xhr from './../../../utils/xhr';
jest.mock('./../../../utils/xhr');
import TrendingEntitiesPod from './../Dashboard/components/TrendingEntitiesPod/TrendingEntitiesPod.jsx';
describe('StartPage.TrendingEntitiesPod:', () => {
let wrapper = null;
beforeAll(() => {
xhr.get.mockReturnValueOnce(Promise.resolve({body: trendingEntities}));
xhr.post.mockReturnValueOnce(Promise.resolve({body: trendingEntitiesData}));
xhr.get.mockReturnValue(Promise.resolve({body: trendingEntityPestleData}));
wrapper = mount(<TrendingEntitiesPod days={30} />);
});
test('...stubbing works', () => {
expect(xhr.get.mock.calls.length).toBe(1);
expect(xhr.post.mock.calls.length).toBe(1); // returns false - why??
});
});
Another way to deal with this issue, as it seems that Jest doesn't play well when doing setTimeout() all the time, is to not test the component's state after all initial requests have done. You can test the individual methods that do the XHR requests (and data parsing logic/component state change). E.g.:
class AirlineCompanies extends React.Component {
// ...
loadData(numberOfCompanies) {
this.setState({loading: true});
return api.getAirlineCompanies(numberOfCompanies)
.then((companies) => {
this.setState({
companies: companies,
loading: false
});
})
.catch((error) => {
utils.logError(error, 'AirlineCompanies.loadData():');
this.setState({loading: false});
});
}
// ...
}
let component = mount(<AirlineCompanies />).instance();
let airlineCompaniesData = [ /*... mock companies data ...*/ ];
it('...should have the state changed and eight AirlineCompany components after data is loaded', (done) => {
xhr.get.mockReturnValueOnce(Promise.resolve({body: airlineCompaniesData}));
component.loadData(30).then(() => {
expect(wrapper.state('companies')).toEqual(airlineCompaniesData);
expect(wrapper.find(AirlineCompany).length).toBe(8);
done();
});
});
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments