Alternative for http-backend-mock and ngE2e for a react application

Question

Currently, I have been using ngMockE2e and httpbackend mock with protractor for an angular page.

Now we are thinking of using react for development, Is there any alternative which I can use for mocking stuff for end to end testing for http calls.

Answer 1

You can use chai and chai-http.

'use strict';

import React from 'react';
import {Provider} from 'react-redux';
import {mount} from 'enzyme';
import {expect} from 'chai';
import configureMockStore from 'redux-mock-store';

import AppCtrl from '../ui-src/components/app.ctrl';

const mockStore = configureMockStore();

describe('mount(<AppCtrl />)', () => {
  let store = mockStore({data1: {}});
  const wrapper = mount(
    <Provider store={store}>
      <AppCtrl />
    </Provider>
  );
  expect(wrapper.find(AppCtrl).length).to.equal(1);
  const container = wrapper.find(AppCtrl);
  it('checks div count', () => {
    expect(container.find('div').length).to.equal(4);
  });
  it('checks br count', () => {
    expect(container.find('br').length).to.equal(6);
  });
  it('checks props.Data1', () => {
    expect(container.props('Data1')).to.be.empty;
  });
  it('checks text contains', () => {
    expect(container.text()).to.contain('React Version');
  });
});

'use strict';

import chai, {expect} from 'chai';
import chaiHttp from 'chai-http';
// import sinon from 'sinon';

chai.use(chaiHttp);

describe('server test with chai-http', () => {
  it('checks get /', () => {
    chai.request('../js/server').get('/')
      .end(function (err, res) {
         expect(err).to.be.null;
         expect(res).to.have.status(200);
      });
  });
  it('checks get /routes/getData', () => {
    chai.request('../js/server').get('/routes/getData')
      .end(function (err, res) {
        expect(err).to.be.null;
        expect(res).to.have.status(200);
        expect(res).to.have.header('content-type', 'application/json; charset=utf-8');
        expect(res).to.have.header('content-length', '93');
        expect(res).to.be.json;
        console.log('res: ', res.headers);
      });
  });
});